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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 1x 1x 376x 376x 376x 376x 376x 376x 376x 376x 376x 376x 376x 376x 376x 376x 1x 141x 141x 141x 141x 141x 141x 141x 141x 141x 141x 376x 141x 141x 141x 1x 47x 47x 47x 47x 47x | // Components
import { Skeleton } from '@/components/common';
const CommentCardSkeleton = () => (
<div className="comment-card-root">
<Skeleton className="size-[52px] rounded-full shrink-0" />
<div className="comment-card-body">
<div className="comment-card-header">
<div className="comment-card-left gap-3">
<Skeleton className="h-4 w-28" />
<Skeleton className="h-5 w-12 rounded-full" />
</div>
<Skeleton className="h-4 w-16" />
</div>
<Skeleton className="h-3.5 w-full mt-1" />
<Skeleton className="h-3.5 w-4/5" />
</div>
</div>
);
const CommentDateGroupSkeleton = ({ cards = 2 }: { cards?: number }) => (
<div className="comment-date-group-root">
<div className="comment-date-group-header">
<div className="comment-date-group-header-left">
<Skeleton className="size-7 rounded-md shrink-0" />
<Skeleton className="h-4 w-36" />
</div>
<Skeleton className="h-4 w-20" />
</div>
<div className="flex flex-col gap-3">
{Array.from({ length: cards }).map((_, i) => (
<CommentCardSkeleton key={i} />
))}
</div>
</div>
);
export const CommentDateGroupListSkeleton = () => (
<div className="comment-date-group-list-root">
<CommentDateGroupSkeleton cards={3} />
<CommentDateGroupSkeleton cards={2} />
<CommentDateGroupSkeleton cards={3} />
</div>
);
|