@ducor/react
Version:
admin template ui interface
52 lines (51 loc) • 2.81 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
import Flex from "./flex";
const Spinner = ({ title = "Loading", variant = "secondary", size = "md", disabledDot = false, disabledSpinner = false, }) => {
// Tailwind color variants
const variantColors = {
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
const sizeClasses = {
sm: "size-4 border-2",
md: "size-8 border-4",
lg: "size-12 border-8",
};
const textSizeClass = {
sm: "text-base",
md: "text-2xl font-semibold",
lg: "text-4xl font-extrabold",
};
// Dynamically select size and color
const selectedColor = variantColors[variant] || variantColors.secondary;
const selectedSize = sizeClasses[size] || sizeClasses.md;
const selectedTextSize = textSizeClass[size] || textSizeClass.md;
const ThreeDot = () => {
const variantColors = {
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",
};
const sizeClasses = {
sm: "size-1",
md: "size-2",
lg: "size-3",
};
const selectedColor = variantColors[variant] || variantColors.secondary;
const selectedSize = sizeClasses[size] || sizeClasses.md;
return (_jsxs(Flex, { align: 'center', justify: 'center', className: 'space-x-2 mt-2', children: [_jsx("div", { className: twMerge(`rounded-full opacity-0 animate-loadingSpanDot1`, selectedColor, selectedSize), children: "." }), _jsx("div", { className: twMerge(`rounded-full opacity-0 animate-loadingSpanDot2`, selectedColor, selectedSize), children: "." }), _jsx("div", { className: twMerge(`rounded-full opacity-0 animate-loadingSpanDot3`, selectedColor, selectedSize), children: "." })] }));
};
return (_jsxs(Flex, { align: 'center', gap: 2, children: [!disabledSpinner ? (_jsx("div", { className: twMerge("border-t-transparent rounded-full animate-spin", selectedSize, selectedColor), role: 'status', children: _jsx("span", { className: 'sr-only', children: title }) })) : null, _jsxs(Flex, { className: twMerge(selectedColor, selectedTextSize), children: [_jsx("span", { className: 'mx-2', children: title }), !disabledDot ? _jsx(ThreeDot, {}) : null] })] }));
};
export default Spinner;