44 lines
889 B
TypeScript
44 lines
889 B
TypeScript
import { Box } from './Box';
|
|
|
|
export interface SkeletonProps {
|
|
width?: string | number;
|
|
height?: string | number;
|
|
variant?: 'text' | 'circular' | 'rectangular';
|
|
animation?: 'pulse' | 'wave' | 'none';
|
|
}
|
|
|
|
export const Skeleton = ({
|
|
width,
|
|
height,
|
|
variant = 'rectangular',
|
|
animation = 'pulse'
|
|
}: SkeletonProps) => {
|
|
const variantClasses = {
|
|
text: 'rounded-sm',
|
|
circular: 'rounded-full',
|
|
rectangular: 'rounded-none',
|
|
};
|
|
|
|
const animationClasses = {
|
|
pulse: 'animate-pulse',
|
|
wave: 'animate-shimmer', // Assuming shimmer is defined
|
|
none: '',
|
|
};
|
|
|
|
const classes = [
|
|
'bg-[var(--ui-color-bg-surface-muted)]',
|
|
variantClasses[variant],
|
|
animationClasses[animation],
|
|
].join(' ');
|
|
|
|
return (
|
|
<Box
|
|
width={width}
|
|
height={height}
|
|
className={classes}
|
|
role="status"
|
|
aria-label="Loading..."
|
|
/>
|
|
);
|
|
};
|