32 lines
986 B
TypeScript
32 lines
986 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Card, CardBody, Skeleton } from "@heroui/react";
|
||
|
|
|
||
|
|
export default function StatsCardsSkeleton() {
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
|
{[1, 2, 3, 4].map((index) => (
|
||
|
|
<Card
|
||
|
|
key={index}
|
||
|
|
className="bg-bg-surface dark:bg-gray-800 border border-border-gray dark:border-gray-700 rounded-[2rem]"
|
||
|
|
>
|
||
|
|
<CardBody className="py-6 px-6">
|
||
|
|
<div className="flex flex-col gap-3">
|
||
|
|
{/* Label Skeleton */}
|
||
|
|
<Skeleton className="h-4 w-32 rounded" />
|
||
|
|
|
||
|
|
{/* Value Skeleton */}
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Skeleton className="h-8 w-28 rounded" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Change Badge Skeleton */}
|
||
|
|
<Skeleton className="h-5 w-16 rounded-full" />
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|