40 lines
950 B
TypeScript
40 lines
950 B
TypeScript
import React from 'react';
|
|
|
|
interface LoadingSpinnerProps {
|
|
overlay?: boolean;
|
|
text?: string;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
|
overlay = false,
|
|
text,
|
|
size = 'md'
|
|
}) => {
|
|
const sizeClasses = {
|
|
sm: 'w-4 h-4',
|
|
md: 'w-8 h-8',
|
|
lg: 'w-12 h-12'
|
|
};
|
|
|
|
const spinner = (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className={`animate-spin rounded-full border-4 border-[var(--border-secondary)] border-t-[var(--color-primary)] ${sizeClasses[size]}`}></div>
|
|
{text && (
|
|
<p className="mt-4 text-[var(--text-secondary)] text-sm">{text}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (overlay) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-[var(--bg-primary)] rounded-lg p-6">
|
|
{spinner}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return spinner;
|
|
}; |