Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 1x 1x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 4x 1x 1x 1x | // Components
import { Skeleton } from '@/components/common';
const CommentStatCardSkeleton = () => (
<div className="flex items-center h-20 border border-border-500 dark:border-white/10 rounded-lg pl-5.5 pr-4 gap-3.5 bg-white dark:bg-gray-800">
{/* Icon circle */}
<Skeleton className="shrink-0 size-10 rounded-full" />
<div className="flex flex-col gap-1.5 min-w-0">
{/* Count */}
<Skeleton className="h-7 w-10" />
{/* Label */}
<Skeleton className="h-3 w-24" />
</div>
</div>
);
export const CommentsSummarySectionSkeleton = () => (
<div className="flex flex-col gap-4">
{/* Date range line */}
<Skeleton className="h-4 w-64" />
{/* Stat cards grid */}
<div className="grid grid-cols-2 xl:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, i) => (
<CommentStatCardSkeleton key={i} />
))}
</div>
</div>
);
|