@ducor/react
Version:
admin template ui interface
53 lines (52 loc) • 3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { twJoin } from "tailwind-merge";
import Flex from "./flex";
var Spinner = function (_a) {
var _b = _a.title, title = _b === void 0 ? "Loading" : _b, _c = _a.varient, varient = _c === void 0 ? "secondary" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.disabledDot, disabledDot = _e === void 0 ? false : _e, _f = _a.disabledSpinner, disabledSpinner = _f === void 0 ? false : _f;
// Tailwind color variants
var varientColors = {
primary: "text-indigo-600 border-indigo-600",
secondary: "text-gray-600 border-gray-600",
success: "text-green-600 border-green-600",
danger: "text-red-600 border-red-600",
warning: "text-orange-500 border-orange-500",
white: "text-white border-white",
black: "text-black border-black",
};
// Tailwind size variants
var sizeClasses = {
sm: "size-4 border-2",
md: "size-8 border-4",
lg: "size-12 border-8",
};
var textSizeClass = {
sm: "text-base",
md: "text-2xl font-semibold",
lg: "text-4xl font-extrabold",
};
// Dynamically select size and color
var selectedColor = varientColors[varient] || varientColors.secondary;
var selectedSize = sizeClasses[size] || sizeClasses.md;
var selectedTextSize = textSizeClass[size] || textSizeClass.md;
var ThreeDot = function () {
var varientColors = {
primary: "bg-indigo-600",
secondary: "bg-gray-600",
success: "bg-green-600 ",
danger: "bg-red-600",
warning: "bg-orange-500",
white: "bg-white",
black: "bg-black",
};
var sizeClasses = {
sm: "size-1",
md: "size-2",
lg: "size-3",
};
var selectedColor = varientColors[varient] || varientColors.secondary;
var selectedSize = sizeClasses[size] || sizeClasses.md;
return (_jsxs(Flex, { align: 'center', justify: 'center', className: 'space-x-2 mt-2', children: [_jsx("div", { className: twJoin("rounded-full opacity-0 animate-loadingSpanDot1", selectedColor, selectedSize), children: "." }), _jsx("div", { className: twJoin("rounded-full opacity-0 animate-loadingSpanDot2", selectedColor, selectedSize), children: "." }), _jsx("div", { className: twJoin("rounded-full opacity-0 animate-loadingSpanDot3", selectedColor, selectedSize), children: "." })] }));
};
return (_jsxs(Flex, { align: 'center', gap: 2, children: [!disabledSpinner ? (_jsx("div", { className: twJoin("border-t-transparent rounded-full animate-spin", selectedSize, selectedColor), role: 'status', children: _jsx("span", { className: 'sr-only', children: title }) })) : null, _jsxs(Flex, { className: twJoin(selectedColor, selectedTextSize), children: [_jsx("span", { className: 'mx-2', children: title }), !disabledDot ? _jsx(ThreeDot, {}) : null] })] }));
};
export default Spinner;