66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { DashboardShell } from "@/components/dashboard-shell"
|
|
import { DashboardHeader } from "@/components/dashboard-header"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
|
|
export default function FoodDetailLoading() {
|
|
return (
|
|
<DashboardShell>
|
|
<div className="flex items-center mb-6">
|
|
<Button variant="ghost" size="sm" className="mr-4" disabled>
|
|
<Skeleton className="h-4 w-4 mr-2" />
|
|
<Skeleton className="h-4 w-16" />
|
|
</Button>
|
|
<DashboardHeader heading={<Skeleton className="h-8 w-48" />} text={<Skeleton className="h-5 w-32" />}>
|
|
<div className="flex space-x-2">
|
|
<Skeleton className="h-10 w-32" />
|
|
</div>
|
|
</DashboardHeader>
|
|
</div>
|
|
|
|
<Tabs defaultValue="details" className="space-y-4">
|
|
<TabsList>
|
|
<TabsTrigger value="details">食物详情</TabsTrigger>
|
|
<TabsTrigger value="batches">批次管理</TabsTrigger>
|
|
<TabsTrigger value="analytics">数据分析</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="details" className="space-y-4">
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<Card className="md:col-span-1">
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-32" />
|
|
</CardHeader>
|
|
<CardContent className="flex justify-center">
|
|
<Skeleton className="w-full aspect-square max-w-[300px] rounded-lg" />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="md:col-span-2">
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-32" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="space-y-2">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-6 w-32" />
|
|
</div>
|
|
))}
|
|
<div className="col-span-2 space-y-2">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-24 w-full" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DashboardShell>
|
|
)
|
|
}
|