33 lines
854 B
TypeScript
33 lines
854 B
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
shape?: 'block' | 'text' | 'circle';
|
|
}
|
|
|
|
export function Skeleton({ shape = 'block', className, ...props }: SkeletonProps) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className={clsx(
|
|
'animate-pulse bg-[var(--bl-surface-muted)]',
|
|
shape === 'text' && 'h-4 rounded-full',
|
|
shape === 'block' && 'min-h-20 rounded-xl',
|
|
shape === 'circle' && 'h-10 w-10 rounded-full',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
|
return (
|
|
<div className="grid gap-2">
|
|
{Array.from({ length: rows }).map((_, index) => (
|
|
<Skeleton key={index} className="h-12 min-h-0" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|