eventx-design-system/dist/components/Loading/Loading.js

Design System do EventX

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { keyframes } from 'styled-components';
import { colors } from '../../tokens/design-tokens';
const spin = keyframes `
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;
const pulse = keyframes `
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
`;
const LoadingContainer = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: ${({ size }) => {
    switch (size) {
        case 'small': return '100px';
        case 'medium': return '200px';
        case 'large': return '300px';
        default: return '200px';
    }
}};
`;
const Spinner = styled.div `
  width: ${({ size }) => {
    switch (size) {
        case 'small': return '20px';
        case 'medium': return '32px';
        case 'large': return '48px';
        default: return '32px';
    }
}};
  height: ${({ size }) => {
    switch (size) {
        case 'small': return '20px';
        case 'medium': return '32px';
        case 'large': return '48px';
        default: return '32px';
    }
}};
  border: 2px solid ${colors.neutral[300]};
  border-top: 2px solid ${colors.brand.primary[500]};
  border-radius: 50%;
  animation: ${spin} 1s linear infinite;
`;
const DotsContainer = styled.div `
  display: flex;
  gap: 8px;
`;
const Dot = styled.div `
  width: ${({ size }) => {
    switch (size) {
        case 'small': return '6px';
        case 'medium': return '8px';
        case 'large': return '12px';
        default: return '8px';
    }
}};
  height: ${({ size }) => {
    switch (size) {
        case 'small': return '6px';
        case 'medium': return '8px';
        case 'large': return '12px';
        default: return '8px';
    }
}};
  background-color: ${colors.brand.primary[500]};
  border-radius: 50%;
  animation: ${pulse} 1.4s ease-in-out infinite both;
  animation-delay: ${({ delay }) => delay}s;
`;
const PulseCircle = styled.div `
  width: ${({ size }) => {
    switch (size) {
        case 'small': return '24px';
        case 'medium': return '40px';
        case 'large': return '60px';
        default: return '40px';
    }
}};
  height: ${({ size }) => {
    switch (size) {
        case 'small': return '24px';
        case 'medium': return '40px';
        case 'large': return '60px';
        default: return '40px';
    }
}};
  background-color: ${colors.brand.primary[500]};
  border-radius: 50%;
  animation: ${pulse} 1.5s ease-in-out infinite;
`;
export const Loading = ({ variant = 'spinner', size = 'medium', className, }) => {
    const renderLoading = () => {
        switch (variant) {
            case 'spinner':
                return _jsx(Spinner, { size: size });
            case 'dots':
                return (_jsxs(DotsContainer, { children: [_jsx(Dot, { size: size, delay: 0 }), _jsx(Dot, { size: size, delay: 0.2 }), _jsx(Dot, { size: size, delay: 0.4 })] }));
            case 'pulse':
                return _jsx(PulseCircle, { size: size });
            default:
                return _jsx(Spinner, { size: size });
        }
    };
    return (_jsx(LoadingContainer, { size: size, variant: variant, className: className, children: renderLoading() }));
};