project-nomad/admin/inertia/components/LoadingSpinner.tsx

41 lines
1006 B
TypeScript

interface LoadingSpinnerProps {
text?: string
fullscreen?: boolean
iconOnly?: boolean
light?: boolean
className?: string
}
const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
text,
fullscreen = true,
iconOnly = false,
light = false,
className,
}) => {
if (!fullscreen) {
return (
<div className="flex flex-col items-center justify-center">
<div
className={`w-8 h-8 border-[3px] ${light ? 'border-white' : 'border-text-muted'} border-t-transparent rounded-full animate-spin ${className || ''}`}
></div>
{!iconOnly && (
<div className={light ? 'text-white mt-2' : 'text-text-primary mt-2'}>
{text || 'Loading...'}
</div>
)}
</div>
)
}
return (
<div className={className}>
<div className="ui active inverted dimmer">
<div className="ui text loader">{!iconOnly && <span>{text || 'Loading'}</span>}</div>
</div>
</div>
)
}
export default LoadingSpinner