49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { DashboardHeader } from "@/components/dashboard-header"
|
|
import { DashboardShell } from "@/components/dashboard-shell"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { Trophy } from "lucide-react"
|
|
|
|
export default function AchievementsLoading() {
|
|
return (
|
|
<DashboardShell>
|
|
<DashboardHeader heading="成就管理" text="创建和管理系统成就">
|
|
<Button disabled className="bg-gradient-to-r from-amber-500 to-orange-600">
|
|
<Trophy className="mr-2 h-4 w-4" />
|
|
添加成就
|
|
</Button>
|
|
</DashboardHeader>
|
|
<div className="grid gap-4">
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Skeleton className="h-8 w-32" />
|
|
<Skeleton className="h-8 w-24" />
|
|
<Skeleton className="h-8 w-24 ml-auto" />
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{Array(6)
|
|
.fill(null)
|
|
.map((_, i) => (
|
|
<Card key={i} className="p-4 space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<Skeleton className="h-10 w-10 rounded-full" />
|
|
<div className="space-y-1 flex-1">
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-3 w-1/2" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="h-16 w-full" />
|
|
<div className="flex justify-between">
|
|
<Skeleton className="h-8 w-20" />
|
|
<Skeleton className="h-8 w-20" />
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</DashboardShell>
|
|
)
|
|
}
|