egecankomur
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
||
export default function PropertiesLoading() {
|
||
return (
|
||
<div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
|
||
{/* Başlık + buton */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Skeleton className="h-7 w-24" />
|
||
<Skeleton className="h-4 w-40" />
|
||
</div>
|
||
<Skeleton className="h-9 w-28 rounded-md" />
|
||
</div>
|
||
|
||
{/* Filtre bar */}
|
||
<div className="flex gap-2 flex-wrap">
|
||
<Skeleton className="h-9 w-48 rounded-md" />
|
||
<Skeleton className="h-9 w-32 rounded-md" />
|
||
<Skeleton className="h-9 w-32 rounded-md" />
|
||
</div>
|
||
|
||
{/* Tablo */}
|
||
<div className="rounded-xl border overflow-hidden">
|
||
<div className="bg-muted/30 p-3 flex gap-4">
|
||
{[120, 80, 80, 70, 60].map((w, i) => (
|
||
<Skeleton key={i} className="h-3" style={{ width: w }} />
|
||
))}
|
||
</div>
|
||
{Array.from({ length: 8 }).map((_, i) => (
|
||
<div key={i} className="border-t p-3 flex gap-4 items-center">
|
||
<Skeleton className="h-10 w-10 rounded-md shrink-0" />
|
||
<div className="flex-1 space-y-1.5">
|
||
<Skeleton className="h-4 w-48" />
|
||
<Skeleton className="h-3 w-32" />
|
||
</div>
|
||
<Skeleton className="h-4 w-20 hidden sm:block" />
|
||
<Skeleton className="h-4 w-16 hidden md:block" />
|
||
<Skeleton className="h-5 w-16 rounded-full" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|