puppy-lib-components
Version:
A modern TypeScript React component library with generic UI components and football pickem domain components
61 lines (60 loc) • 2.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CircularProgress, Box, Typography, Backdrop } from '@mui/material';
export const Loading = ({ size = 'md', variant = 'spinner', color = 'primary', text, overlay = false, className = '', ...props }) => {
// Map custom sizes to MUI sizes
const muiSize = size === 'sm' ? 20 :
size === 'md' ? 40 :
size === 'lg' ? 60 :
size === 'xl' ? 80 : 40;
// Map custom colors to MUI colors
const muiColor = color === 'primary' ? 'primary' :
color === 'secondary' ? 'secondary' :
color === 'white' ? 'inherit' : 'primary';
const renderLoader = () => {
switch (variant) {
case 'dots':
return (_jsx(Box, { display: "flex", gap: 1, children: [0, 1, 2].map((index) => (_jsx(Box, { sx: {
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: muiColor === 'inherit' ? 'white' : 'currentColor',
animation: 'loading-dots 1.4s infinite ease-in-out',
animationDelay: `${index * 0.16}s`,
'@keyframes loading-dots': {
'0%, 80%, 100%': {
transform: 'scale(0)',
},
'40%': {
transform: 'scale(1)',
},
},
} }, index))) }));
case 'pulse':
return (_jsx(Box, { sx: {
width: muiSize,
height: muiSize,
borderRadius: '50%',
backgroundColor: muiColor === 'inherit' ? 'white' : 'currentColor',
animation: 'loading-pulse 1.5s infinite ease-in-out',
'@keyframes loading-pulse': {
'0%': {
transform: 'scale(0)',
opacity: 1,
},
'100%': {
transform: 'scale(1)',
opacity: 0,
},
},
} }));
case 'spinner':
default:
return _jsx(CircularProgress, { size: muiSize, color: muiColor });
}
};
const content = (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, className: className, ...props, children: [renderLoader(), text && (_jsx(Typography, { variant: "body2", color: "text.secondary", children: text }))] }));
if (overlay) {
return (_jsx(Backdrop, { open: true, sx: { zIndex: 1300 }, children: content }));
}
return content;
};