123 lines
3.9 KiB
TypeScript
123 lines
3.9 KiB
TypeScript
import { DashboardShell } from "@/components/dashboard-shell"
|
|
import { DashboardHeader } from "@/components/dashboard-header"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { ArrowLeft } from "lucide-react"
|
|
|
|
export default function DanceDetailLoading() {
|
|
return (
|
|
<DashboardShell>
|
|
<DashboardHeader heading="舞蹈详情" text="加载中...">
|
|
<Button variant="outline">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
返回
|
|
</Button>
|
|
</DashboardHeader>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
|
<Card className="md:col-span-2">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle>
|
|
<Skeleton className="h-6 w-[200px]" />
|
|
</CardTitle>
|
|
<CardDescription>
|
|
<Skeleton className="h-4 w-[300px]" />
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="aspect-video w-full" />
|
|
<div className="mt-4 flex gap-2">
|
|
<Skeleton className="h-6 w-16" />
|
|
<Skeleton className="h-6 w-16" />
|
|
<Skeleton className="h-6 w-16" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle>
|
|
<Skeleton className="h-6 w-[100px]" />
|
|
</CardTitle>
|
|
<CardDescription>
|
|
<Skeleton className="h-4 w-[150px]" />
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-5 w-full" />
|
|
<Skeleton className="h-5 w-full" />
|
|
<Skeleton className="h-5 w-full" />
|
|
<Skeleton className="h-5 w-full" />
|
|
</div>
|
|
|
|
<Skeleton className="h-px w-full" />
|
|
|
|
<div>
|
|
<Skeleton className="h-4 w-[80px] mb-2" />
|
|
<Skeleton className="h-10 w-full" />
|
|
</div>
|
|
|
|
<div>
|
|
<Skeleton className="h-4 w-[80px] mb-2" />
|
|
<Skeleton className="h-5 w-full" />
|
|
</div>
|
|
|
|
<div>
|
|
<Skeleton className="h-4 w-[80px] mb-2" />
|
|
<Skeleton className="h-5 w-full" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Tabs defaultValue="details" className="space-y-4">
|
|
<TabsList>
|
|
<TabsTrigger value="details" disabled>
|
|
详情
|
|
</TabsTrigger>
|
|
<TabsTrigger value="motion" disabled>
|
|
动作管理
|
|
</TabsTrigger>
|
|
<TabsTrigger value="related" disabled>
|
|
相关舞蹈
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="details" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
<Skeleton className="h-6 w-[100px]" />
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="h-20 w-full" />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
<Skeleton className="h-6 w-[100px]" />
|
|
</CardTitle>
|
|
<CardDescription>
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Skeleton className="h-24 w-full" />
|
|
<Skeleton className="h-24 w-full" />
|
|
<Skeleton className="h-24 w-full" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DashboardShell>
|
|
)
|
|
}
|