32 lines
944 B
TypeScript
32 lines
944 B
TypeScript
import type { HTMLAttributes } from 'react';
|
|
import type { VariantProps } from 'tailwind-variants';
|
|
import { tv } from 'tailwind-variants';
|
|
|
|
const spinnerVariants = tv({
|
|
base: 'inline-block relative opacity-0 animate-delay-1000 animate-fade animate-fill-forwards',
|
|
variants: {
|
|
size: {
|
|
small: 'w-8 h-8',
|
|
medium: 'w-12 h-12',
|
|
large: 'w-16 h-16',
|
|
},
|
|
},
|
|
});
|
|
|
|
type SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;
|
|
|
|
export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
|
|
size?: SpinnerVariantsProps['size'];
|
|
};
|
|
|
|
export function Spinner({
|
|
size = 'medium',
|
|
className,
|
|
}: SpinnerProps) {
|
|
return (
|
|
<div className={spinnerVariants({ size, className })}>
|
|
<div className="absolute w-full h-full rounded-full border-2 border-fg-primary animate-fade-scale"></div>
|
|
<div className="absolute w-full h-full rounded-full border-2 border-fg-primary animate-fade-scale animate-delay-500"></div>
|
|
</div>
|
|
);
|
|
}
|