36 lines
820 B
TypeScript
36 lines
820 B
TypeScript
import React from 'react';
|
|
|
|
interface SkeletonProps {
|
|
className?: string;
|
|
variant?: 'circle' | 'rect' | 'text';
|
|
width?: string | number;
|
|
height?: string | number;
|
|
}
|
|
|
|
export function Skeleton({
|
|
className = '',
|
|
variant = 'rect',
|
|
width,
|
|
height
|
|
}: SkeletonProps) {
|
|
const baseClasses = "anim-shimmer rounded";
|
|
|
|
const variantClasses = {
|
|
circle: "rounded-full",
|
|
rect: "rounded-lg",
|
|
text: "rounded h-4 w-full"
|
|
};
|
|
|
|
const style: React.CSSProperties = {
|
|
width: typeof width === 'number' ? `${width}px` : width,
|
|
height: typeof height === 'number' ? `${height}px` : height,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${baseClasses} ${variantClasses[variant]} ${className}`}
|
|
style={style}
|
|
/>
|
|
);
|
|
}
|