44 lines
902 B
TypeScript
44 lines
902 B
TypeScript
import React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export interface SkeletonProps {
|
|
width?: string | number;
|
|
height?: string | number;
|
|
className?: string;
|
|
rounded?: 'sm' | 'md' | 'lg' | 'full';
|
|
}
|
|
|
|
const roundedMap: Record<string, string> = {
|
|
sm: 'rounded-sm',
|
|
md: 'rounded-md',
|
|
lg: 'rounded-lg',
|
|
full: 'rounded-full',
|
|
};
|
|
|
|
export const Skeleton: React.FC<SkeletonProps> = ({
|
|
width,
|
|
height,
|
|
className,
|
|
rounded = 'lg',
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={twMerge(
|
|
clsx(
|
|
'animate-pulse bg-gray-700/50',
|
|
roundedMap[rounded],
|
|
),
|
|
className,
|
|
)}
|
|
style={{
|
|
width: typeof width === 'number' ? `${width}px` : width,
|
|
height: typeof height === 'number' ? `${height}px` : height,
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
};
|
|
|
|
Skeleton.displayName = 'Skeleton';
|