You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
928 B
35 lines
928 B
import { cn } from "@/lib/utils"
|
|
import { Loader2 } from 'lucide-react'
|
|
|
|
interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
size?: 'sm' | 'md' | 'lg'
|
|
color?: 'primary' | 'secondary' | 'muted' | 'white'
|
|
}
|
|
|
|
export function Spinner({ size = 'md', color = 'primary', className, ...props }: SpinnerProps) {
|
|
return (
|
|
<div
|
|
role="status"
|
|
className={cn(
|
|
"animate-spin",
|
|
{
|
|
'h-4 w-4': size === 'sm',
|
|
'h-6 w-6': size === 'md',
|
|
'h-8 w-8': size === 'lg',
|
|
},
|
|
{
|
|
'text-primary': color === 'primary',
|
|
'text-secondary-foreground': color === 'secondary',
|
|
'text-muted-foreground': color === 'muted',
|
|
'text-white': color === 'white',
|
|
},
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<Loader2 className="h-full w-full" />
|
|
<span className="sr-only">Loading...</span>
|
|
</div>
|
|
)
|
|
}
|
|
|