61 lines
1.1 KiB
TypeScript
61 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
interface LoadingProps {
|
|
size?: 'sm' | 'md' | 'lg';
|
|
text?: string;
|
|
fullScreen?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const Loading: React.FC<LoadingProps> = ({
|
|
size = 'md',
|
|
text = 'Loading...',
|
|
fullScreen = false,
|
|
className = '',
|
|
}) => {
|
|
const sizeClasses = {
|
|
sm: 'w-4 h-4',
|
|
md: 'w-8 h-8',
|
|
lg: 'w-12 h-12',
|
|
};
|
|
|
|
const textSizeClasses = {
|
|
sm: 'text-sm',
|
|
md: 'text-base',
|
|
lg: 'text-lg',
|
|
};
|
|
|
|
const content = (
|
|
<div className={`flex flex-col items-center
|
|
justify-center gap-3 ${className}`}
|
|
>
|
|
<Loader2
|
|
className={`${sizeClasses[size]}
|
|
text-indigo-600 animate-spin`}
|
|
/>
|
|
{text && (
|
|
<p className={`${textSizeClasses[size]}
|
|
text-gray-600 font-medium`}
|
|
>
|
|
{text}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (fullScreen) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50
|
|
flex items-center justify-center"
|
|
>
|
|
{content}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
export default Loading;
|