40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
|
export function NewsMainCardSketelon() {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
aria-hidden
|
||
|
|
className="animate-pulse overflow-hidden rounded-2xl border border-zinc-200"
|
||
|
|
>
|
||
|
|
{/* image */}
|
||
|
|
<div className="aspect-[21/9] w-full bg-zinc-200" />
|
||
|
|
{/* body */}
|
||
|
|
<div className="space-y-3 p-4">
|
||
|
|
<div className="h-5 w-28 rounded bg-zinc-200" /> {/* chip/date row */}
|
||
|
|
<div className="h-6 w-4/5 rounded bg-zinc-200" /> {/* title */}
|
||
|
|
<div className="h-4 w-full rounded bg-zinc-200" /> {/* desc line 1 */}
|
||
|
|
<div className="h-4 w-11/12 rounded bg-zinc-200" /> {/* desc line 2 */}
|
||
|
|
<div className="h-4 w-2/3 rounded bg-zinc-200" /> {/* desc line 3 */}
|
||
|
|
<div className="mt-2 h-5 w-40 rounded bg-zinc-200" />
|
||
|
|
{/* link */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function NewsSecondaryCardSkeleton() {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
aria-hidden
|
||
|
|
className="animate-pulse overflow-hidden rounded-2xl border border-zinc-200 p-4"
|
||
|
|
>
|
||
|
|
<div className="h-5 w-24 rounded bg-zinc-200" /> {/* chip */}
|
||
|
|
<div className="mt-3 h-5 w-3/4 rounded bg-zinc-200" /> {/* title 1 */}
|
||
|
|
<div className="mt-2 h-5 w-5/6 rounded bg-zinc-200" /> {/* title 2 */}
|
||
|
|
<div className="mt-3 h-4 w-full rounded bg-zinc-200" />
|
||
|
|
{/* desc 1 */}
|
||
|
|
<div className="mt-2 h-4 w-10/12 rounded bg-zinc-200" />
|
||
|
|
{/* desc 2 */}
|
||
|
|
<div className="mt-4 h-5 w-36 rounded bg-zinc-200" /> {/* link */}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|