86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { Card } from "@/components/ui/card"
|
|
|
|
export default function Loading() {
|
|
return (
|
|
<div className="container mx-auto py-4 px-4 sm:px-6 md:py-6">
|
|
<div className="flex items-center mb-6">
|
|
<Skeleton className="h-9 w-9 rounded-md mr-2" />
|
|
<Skeleton className="h-7 w-48" />
|
|
</div>
|
|
|
|
<div className="flex justify-between mb-8">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="flex items-center">
|
|
<div className="flex flex-col items-center relative">
|
|
<Skeleton className="h-10 w-10 rounded-full" />
|
|
<div className="mt-2 text-center">
|
|
<Skeleton className="h-4 w-16 mt-2" />
|
|
<Skeleton className="h-3 w-20 mt-1" />
|
|
</div>
|
|
</div>
|
|
{i < 4 && <Skeleton className="h-0.5 w-16 md:w-24 lg:w-32 mx-1" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Card>
|
|
<div className="p-6 space-y-6">
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-5 w-32" />
|
|
<Skeleton className="h-10 w-full" />
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-5 w-40" />
|
|
<div className="flex space-x-2">
|
|
<Skeleton className="h-10 flex-1" />
|
|
<Skeleton className="h-10 flex-1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-5 w-32" />
|
|
<div className="flex items-center space-x-2">
|
|
<Skeleton className="h-10 w-10" />
|
|
<Skeleton className="h-10 w-20" />
|
|
<Skeleton className="h-10 w-10" />
|
|
<Skeleton className="h-5 w-16" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-5 w-32" />
|
|
<div className="flex">
|
|
<Skeleton className="h-10 flex-1" />
|
|
<Skeleton className="h-10 flex-1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Skeleton className="h-5 w-40" />
|
|
<Skeleton className="h-6 w-12" />
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Skeleton className="h-5 w-40" />
|
|
<Skeleton className="h-6 w-12" />
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Skeleton className="h-5 w-40" />
|
|
<Skeleton className="h-6 w-12" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="flex space-x-2 justify-end mt-6">
|
|
<Skeleton className="h-10 w-24" />
|
|
<Skeleton className="h-10 w-24" />
|
|
<Skeleton className="h-10 w-24" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|