loading.tsx (6366B)
1 import { Skeleton } from "@/components/ui/skeleton" 2 import { Card, CardContent, CardHeader } from "@/components/ui/card" 3 import Link from "next/link" 4 import { Shield } from "lucide-react" 5 6 export default function Loading() { 7 return ( 8 <div className="flex min-h-screen flex-col bg-black text-white"> 9 <header className="sticky top-0 z-10 border-b border-gray-800 bg-black/80 backdrop-blur-sm"> 10 <div className="container flex h-16 items-center justify-between px-4 md:px-6"> 11 <div className="flex items-center gap-4"> 12 <Link href="/" className="flex items-center gap-2"> 13 <Shield className="h-6 w-6 text-purple-400" /> 14 <span className="text-xl font-bold tracking-tighter">Draupnir4All</span> 15 </Link> 16 </div> 17 </div> 18 </header> 19 <main className="flex-1 container px-4 py-8 md:px-6 md:py-12"> 20 <div> 21 <div className="flex items-center justify-between mb-8"> 22 <Skeleton className="h-9 w-64" /> 23 <div className="hidden md:block"> 24 <Skeleton className="h-10 w-[400px]" /> 25 </div> 26 </div> 27 28 <Card className="border-gray-800 bg-gray-950"> 29 <CardHeader className="pb-2"> 30 <div className="flex items-center justify-between"> 31 <Skeleton className="h-6 w-40" /> 32 <Skeleton className="h-8 w-32" /> 33 </div> 34 <Skeleton className="h-4 w-64 mt-1" /> 35 </CardHeader> 36 <CardContent> 37 <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> 38 <div className="space-y-4"> 39 <Skeleton className="h-5 w-32 mb-2" /> 40 41 {Array(3) 42 .fill(0) 43 .map((_, i) => ( 44 <div key={i} className="p-3 rounded-md border border-gray-800 space-y-2"> 45 <div className="flex items-center justify-between mb-2"> 46 <div className="flex items-center gap-2"> 47 <Skeleton className="h-4 w-4" /> 48 <Skeleton className="h-5 w-32" /> 49 </div> 50 <Skeleton className="h-5 w-16" /> 51 </div> 52 <Skeleton className="h-4 w-48" /> 53 <Skeleton className="h-4 w-full" /> 54 <Skeleton className="h-4 w-32" /> 55 </div> 56 ))} 57 </div> 58 59 <div className="space-y-4"> 60 <Skeleton className="h-5 w-32 mb-2" /> 61 62 <div className="space-y-4"> 63 <div className="p-4 rounded-md bg-gray-900 border border-gray-800"> 64 <div className="flex items-center justify-between mb-3"> 65 <Skeleton className="h-5 w-40" /> 66 <Skeleton className="h-5 w-24" /> 67 </div> 68 69 <div className="space-y-2"> 70 {Array(4) 71 .fill(0) 72 .map((_, i) => ( 73 <div key={i} className="flex justify-between"> 74 <Skeleton className="h-4 w-24" /> 75 <Skeleton className="h-4 w-32" /> 76 </div> 77 ))} 78 </div> 79 </div> 80 81 <div className="p-4 rounded-md bg-gray-900 border border-gray-800"> 82 <Skeleton className="h-5 w-40 mb-3" /> 83 84 <div className="space-y-3"> 85 {Array(3) 86 .fill(0) 87 .map((_, i) => ( 88 <div key={i} className="flex justify-between"> 89 <Skeleton className="h-4 w-24" /> 90 <Skeleton className="h-4 w-32" /> 91 </div> 92 ))} 93 94 <Skeleton className="h-[100px] w-full mt-4" /> 95 </div> 96 </div> 97 98 <div className="flex gap-2 mt-4"> 99 <Skeleton className="h-9 w-28" /> 100 <Skeleton className="h-9 w-28" /> 101 <Skeleton className="h-9 w-36" /> 102 </div> 103 </div> 104 </div> 105 </div> 106 </CardContent> 107 </Card> 108 </div> 109 </main> 110 </div> 111 112 ) 113 }