77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Card, CardHeader, CardBody, CardFooter, Skeleton } from "@heroui/react";
|
||
|
|
|
||
|
|
export default function ProductCardSkeleton() {
|
||
|
|
return (
|
||
|
|
<Card className="bg-bg-subtle dark:bg-gray-800 border border-border-gray dark:border-gray-700 shadow-lg h-full rounded-xl">
|
||
|
|
{/* Product Header */}
|
||
|
|
<CardHeader className="pb-6 px-6 pt-6">
|
||
|
|
<div className="flex gap-4 items-center w-full">
|
||
|
|
{/* Icon Skeleton */}
|
||
|
|
<Skeleton className="rounded-2xl w-16 h-16 flex-shrink-0" />
|
||
|
|
|
||
|
|
{/* Title and Category Skeleton */}
|
||
|
|
<div className="flex flex-col gap-2 flex-1">
|
||
|
|
<Skeleton className="h-6 w-32 rounded-lg" />
|
||
|
|
<Skeleton className="h-5 w-24 rounded-full" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
|
||
|
|
<CardBody className="py-0 px-6">
|
||
|
|
{/* Yield APY & Pool Cap Skeleton */}
|
||
|
|
<div className="border-b border-gray-50 dark:border-gray-700 pb-6 flex">
|
||
|
|
<div className="flex-1 flex flex-col gap-2">
|
||
|
|
<Skeleton className="h-3 w-16 rounded" />
|
||
|
|
<Skeleton className="h-8 w-20 rounded" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 flex flex-col items-end gap-2">
|
||
|
|
<Skeleton className="h-3 w-16 rounded" />
|
||
|
|
<Skeleton className="h-8 w-24 rounded" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Details Section Skeleton */}
|
||
|
|
<div className="pt-6 flex flex-col gap-4">
|
||
|
|
{/* Maturity & Risk */}
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<div className="flex-1 flex flex-col gap-2">
|
||
|
|
<Skeleton className="h-3 w-16 rounded" />
|
||
|
|
<Skeleton className="h-5 w-24 rounded" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 flex flex-col items-end gap-2">
|
||
|
|
<Skeleton className="h-3 w-10 rounded" />
|
||
|
|
<Skeleton className="h-5 w-20 rounded" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Lock-Up & Circulating Supply */}
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<div className="flex-1 flex flex-col gap-2">
|
||
|
|
<Skeleton className="h-3 w-14 rounded" />
|
||
|
|
<Skeleton className="h-5 w-20 rounded" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 flex flex-col items-end gap-2">
|
||
|
|
<Skeleton className="h-3 w-24 rounded" />
|
||
|
|
<Skeleton className="h-5 w-16 rounded" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
|
||
|
|
{/* Pool Capacity & Invest Button Skeleton */}
|
||
|
|
<CardFooter className="pt-8 pb-6 px-6 flex-col gap-4">
|
||
|
|
<div className="flex flex-col gap-2 w-full">
|
||
|
|
<div className="flex justify-between">
|
||
|
|
<Skeleton className="h-3 w-24 rounded" />
|
||
|
|
<Skeleton className="h-4 w-16 rounded" />
|
||
|
|
</div>
|
||
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
||
|
|
</div>
|
||
|
|
<Skeleton className="h-10 w-full rounded-lg" />
|
||
|
|
</CardFooter>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|