34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
export const ArticleCardSkeleton = () => (
|
|
<div className='flex flex-col overflow-hidden rounded-xl border border-border bg-card'>
|
|
<div className='aspect-video w-full animate-pulse bg-muted' />
|
|
<div className='flex flex-1 flex-col gap-3 p-5'>
|
|
<div className='h-3 w-24 animate-pulse rounded bg-muted' />
|
|
<div className='space-y-1.5'>
|
|
<div className='h-4 w-full animate-pulse rounded bg-muted' />
|
|
<div className='h-4 w-3/4 animate-pulse rounded bg-muted' />
|
|
</div>
|
|
<div className='flex-1 space-y-1.5'>
|
|
<div className='h-3 w-full animate-pulse rounded bg-muted' />
|
|
<div className='h-3 w-full animate-pulse rounded bg-muted' />
|
|
<div className='h-3 w-2/3 animate-pulse rounded bg-muted' />
|
|
</div>
|
|
<div className='mt-1 h-3 w-16 animate-pulse rounded bg-muted' />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export const ArticleListSkeleton = ({
|
|
skeletonSize,
|
|
}: {
|
|
skeletonSize: number;
|
|
}) => (
|
|
<>
|
|
<div className='mb-10 h-4 w-32 animate-pulse rounded bg-muted' />
|
|
<div className='grid gap-6 sm:grid-cols-2 xl:grid-cols-3'>
|
|
{Array.from({ length: skeletonSize }).map((_, i) => (
|
|
<ArticleCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|