170 lines
8.1 KiB
TypeScript
170 lines
8.1 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { Skeleton } from "@heroui/react";
|
|||
|
|
|
|||
|
|
export default function ProductDetailSkeleton() {
|
|||
|
|
return (
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 w-full">
|
|||
|
|
|
|||
|
|
{/* ① Header + StatsCards — 同一卡片，跨3列 */}
|
|||
|
|
<div className="order-1 md:col-span-3 min-w-0">
|
|||
|
|
<div className="bg-white dark:bg-gray-800 border border-[#f3f4f6] dark:border-gray-700 rounded-2xl md:rounded-3xl p-4 md:p-8 flex flex-col gap-5 md:gap-6">
|
|||
|
|
{/* ProductHeader */}
|
|||
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<Skeleton className="w-12 h-12 md:w-16 md:h-16 rounded-2xl flex-shrink-0" />
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
<Skeleton className="h-6 w-28 md:w-32 rounded-lg" />
|
|||
|
|
<Skeleton className="h-4 w-40 md:w-56 rounded" />
|
|||
|
|
<div className="flex gap-2 mt-1">
|
|||
|
|
<Skeleton className="h-5 w-16 md:w-20 rounded-full" />
|
|||
|
|
<Skeleton className="h-5 w-20 md:w-24 rounded-full" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Skeleton className="h-8 w-full md:w-36 rounded-xl" />
|
|||
|
|
</div>
|
|||
|
|
{/* StatsCards — 移动端2列，桌面端5列 */}
|
|||
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|||
|
|
{[0, 1, 2, 3, 4].map((i) => (
|
|||
|
|
<div key={i} className="rounded-2xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-5 flex flex-col gap-3">
|
|||
|
|
<Skeleton className="h-3 w-20 rounded" />
|
|||
|
|
<Skeleton className="h-7 w-16 rounded-lg" />
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ② 交易板 + Protocol — 移动端排第2，桌面端右列 */}
|
|||
|
|
<div className="order-2 md:order-3 md:col-span-1 min-w-0 flex flex-col gap-6 md:gap-8">
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-4">
|
|||
|
|
<Skeleton className="h-10 w-full rounded-xl" />
|
|||
|
|
<Skeleton className="h-14 w-full rounded-2xl" />
|
|||
|
|
<Skeleton className="h-14 w-full rounded-2xl" />
|
|||
|
|
<Skeleton className="h-4 w-full rounded" />
|
|||
|
|
<Skeleton className="h-12 w-full rounded-2xl" />
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-4">
|
|||
|
|
<Skeleton className="h-5 w-36 rounded" />
|
|||
|
|
{[0, 1, 2, 3].map((i) => (
|
|||
|
|
<div key={i} className="flex items-center justify-between">
|
|||
|
|
<Skeleton className="h-4 w-24 rounded" />
|
|||
|
|
<Skeleton className="h-4 w-4 rounded" />
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ③ Asset Overview + APY + Description — 移动端排第3，桌面端左列 */}
|
|||
|
|
<div className="order-3 md:order-2 md:col-span-2 min-w-0 flex flex-col gap-6 md:gap-8">
|
|||
|
|
{/* AssetOverviewCard */}
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-8 flex flex-col gap-5">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<Skeleton className="h-5 w-28 rounded" />
|
|||
|
|
<Skeleton className="h-6 w-16 rounded-full" />
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
{[0, 1, 2, 3].map((i) => (
|
|||
|
|
<div key={i} className="flex justify-between">
|
|||
|
|
<Skeleton className="h-4 w-24 rounded" />
|
|||
|
|
<Skeleton className="h-4 w-16 rounded" />
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<Skeleton className="h-px w-full rounded" />
|
|||
|
|
<Skeleton className="h-12 w-full rounded-2xl" />
|
|||
|
|
</div>
|
|||
|
|
{/* APYHistoryCard */}
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-5">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<Skeleton className="h-4 w-28 rounded" />
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Skeleton className="h-7 w-16 rounded-full" />
|
|||
|
|
<Skeleton className="h-7 w-16 rounded-full" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Skeleton className="h-[140px] md:h-[160px] w-full rounded-xl" />
|
|||
|
|
</div>
|
|||
|
|
{/* AssetDescriptionCard */}
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-4">
|
|||
|
|
<Skeleton className="h-5 w-32 rounded" />
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
{[0, 1, 2, 3].map((i) => (
|
|||
|
|
<Skeleton key={i} className="h-4 w-full rounded" />
|
|||
|
|
))}
|
|||
|
|
<Skeleton className="h-4 w-2/3 rounded" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ④ Season1Rewards — 全宽 */}
|
|||
|
|
<div className="order-4 md:col-span-3 min-w-0">
|
|||
|
|
<Skeleton className="h-24 md:h-28 w-full rounded-3xl" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ⑤ PerformanceAnalysis — 全宽 */}
|
|||
|
|
<div className="order-5 md:col-span-3 min-w-0">
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-8 flex flex-col gap-5">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<Skeleton className="h-5 w-40 rounded" />
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Skeleton className="h-8 w-8 rounded-lg" />
|
|||
|
|
<Skeleton className="h-8 w-20 rounded-lg" />
|
|||
|
|
<Skeleton className="h-8 w-8 rounded-lg" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-7 gap-1">
|
|||
|
|
{Array.from({ length: 35 }).map((_, i) => (
|
|||
|
|
<Skeleton key={i} className="h-8 md:h-10 w-full rounded-lg" />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ⑥ AssetCustodyVerification — 全宽 */}
|
|||
|
|
<div className="order-6 md:col-span-3 min-w-0 flex flex-col gap-8">
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
<Skeleton className="h-6 w-48 rounded" />
|
|||
|
|
<Skeleton className="h-4 w-80 rounded" />
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-8 flex flex-col gap-6">
|
|||
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 pb-6 border-b border-[#f3f4f6] dark:border-gray-700">
|
|||
|
|
<Skeleton className="h-5 w-40 rounded" />
|
|||
|
|
<Skeleton className="h-4 w-48 rounded" />
|
|||
|
|
</div>
|
|||
|
|
<div className="hidden md:grid grid-cols-5 gap-4 pb-4 border-b border-[#f3f4f6] dark:border-gray-700">
|
|||
|
|
{[0, 1, 2, 3, 4].map((i) => (
|
|||
|
|
<Skeleton key={i} className="h-3 w-20 rounded" />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="hidden md:grid grid-cols-5 gap-4 py-4">
|
|||
|
|
{[0, 1, 2, 3, 4].map((i) => (
|
|||
|
|
<Skeleton key={i} className="h-5 w-full rounded" />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
|
|||
|
|
{[0, 1, 2].map((i) => (
|
|||
|
|
<div key={i} className="bg-white dark:bg-gray-800 rounded-2xl border border-[#f3f4f6] dark:border-gray-700 p-6 flex flex-col gap-4">
|
|||
|
|
<div className="flex items-start gap-4">
|
|||
|
|
<Skeleton className="w-5 h-5 rounded flex-shrink-0" />
|
|||
|
|
<div className="flex flex-col gap-2 flex-1">
|
|||
|
|
<Skeleton className="h-4 w-32 rounded" />
|
|||
|
|
<Skeleton className="h-3 w-full rounded" />
|
|||
|
|
<Skeleton className="h-3 w-3/4 rounded" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2 mt-2">
|
|||
|
|
<Skeleton className="h-3 w-20 rounded" />
|
|||
|
|
<Skeleton className="h-4 w-4 rounded" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|