38 lines
862 B
TypeScript
38 lines
862 B
TypeScript
import React from 'react';
|
|
|
|
interface SkeletonBlockProps {
|
|
width?: 'full' | 'auto' | string;
|
|
height?: 'full' | 'auto' | string;
|
|
rounded?: 'none' | 'sm' | 'md' | 'full';
|
|
}
|
|
|
|
const SkeletonBlock: React.FC<SkeletonBlockProps> = ({
|
|
width = 'full',
|
|
height = '4',
|
|
rounded = 'md',
|
|
}) => {
|
|
const widthClass = width === 'full' ? 'w-full' : width === 'auto' ? 'w-auto' : `w-[${width}]`;
|
|
const heightClass = height === 'full' ? 'h-full' : height === 'auto' ? 'h-auto' : `h-[${height}]`;
|
|
|
|
const roundedMap = {
|
|
none: 'rounded-none',
|
|
sm: 'rounded-sm',
|
|
md: 'rounded-md',
|
|
full: 'rounded-full',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
${widthClass}
|
|
${heightClass}
|
|
${roundedMap[rounded]}
|
|
bg-zinc-200
|
|
dark:bg-zinc-700
|
|
animate-pulse
|
|
`}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SkeletonBlock; |