117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
import { cn } from '@utils/cn';
|
|
import { Skeleton } from './Skeleton';
|
|
|
|
export interface SkeletonTableProps {
|
|
rows?: number;
|
|
columns?: number;
|
|
showHeader?: boolean;
|
|
animate?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function SkeletonTable({
|
|
rows = 5,
|
|
columns = 4,
|
|
showHeader = true,
|
|
animate = true,
|
|
className,
|
|
}: SkeletonTableProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700',
|
|
className
|
|
)}
|
|
>
|
|
<table className="w-full">
|
|
{showHeader && (
|
|
<thead className="bg-gray-50 dark:bg-gray-800">
|
|
<tr>
|
|
{Array.from({ length: columns }).map((_, colIndex) => (
|
|
<th key={colIndex} className="px-4 py-3">
|
|
<Skeleton
|
|
width="80%"
|
|
height="0.875rem"
|
|
rounded="sm"
|
|
animate={animate}
|
|
/>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
)}
|
|
<tbody className="bg-white dark:bg-gray-900">
|
|
{Array.from({ length: rows }).map((_, rowIndex) => (
|
|
<tr
|
|
key={rowIndex}
|
|
className="border-t border-gray-200 dark:border-gray-700"
|
|
>
|
|
{Array.from({ length: columns }).map((_, colIndex) => (
|
|
<td key={colIndex} className="px-4 py-3">
|
|
<Skeleton
|
|
width={colIndex === 0 ? '90%' : '70%'}
|
|
height="1rem"
|
|
rounded="sm"
|
|
animate={animate}
|
|
/>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Alternative: Simple row-based skeleton for lists
|
|
export interface SkeletonTableRowsProps {
|
|
rows?: number;
|
|
animate?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function SkeletonTableRows({
|
|
rows = 5,
|
|
animate = true,
|
|
className,
|
|
}: SkeletonTableRowsProps) {
|
|
return (
|
|
<div className={cn('space-y-2', className)}>
|
|
{Array.from({ length: rows }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-4 p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
|
|
>
|
|
<Skeleton
|
|
width={40}
|
|
height={40}
|
|
rounded="full"
|
|
animate={animate}
|
|
/>
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton
|
|
width="60%"
|
|
height="1rem"
|
|
rounded="sm"
|
|
animate={animate}
|
|
/>
|
|
<Skeleton
|
|
width="40%"
|
|
height="0.75rem"
|
|
rounded="sm"
|
|
animate={animate}
|
|
/>
|
|
</div>
|
|
<Skeleton
|
|
width={80}
|
|
height="2rem"
|
|
rounded="md"
|
|
animate={animate}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|