48 lines
931 B
TypeScript
48 lines
931 B
TypeScript
import { cn } from '@utils/cn';
|
|
|
|
export interface SkeletonProps {
|
|
width?: string | number;
|
|
height?: string | number;
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
animate?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const roundedClasses = {
|
|
none: 'rounded-none',
|
|
sm: 'rounded-sm',
|
|
md: 'rounded-md',
|
|
lg: 'rounded-lg',
|
|
full: 'rounded-full',
|
|
};
|
|
|
|
export function Skeleton({
|
|
width,
|
|
height,
|
|
rounded = 'md',
|
|
animate = true,
|
|
className,
|
|
}: SkeletonProps) {
|
|
const style: React.CSSProperties = {};
|
|
|
|
if (width !== undefined) {
|
|
style.width = typeof width === 'number' ? `${width}px` : width;
|
|
}
|
|
|
|
if (height !== undefined) {
|
|
style.height = typeof height === 'number' ? `${height}px` : height;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'bg-gray-200 dark:bg-gray-700',
|
|
roundedClasses[rounded],
|
|
animate && 'animate-pulse',
|
|
className
|
|
)}
|
|
style={style}
|
|
/>
|
|
);
|
|
}
|