resources/js/components/admin/admin-skeletons.tsx

import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

export function AdminFormSkeleton({ rows = 4 }: { rows?: number }) {
    return (
        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
            <CardContent className="pt-6">
                <div className="grid gap-4">
                    <div className="grid gap-3 md:grid-cols-2">
                        {Array.from({ length: rows * 2 }).map((_, i) => (
                            <div className="grid gap-1.5" key={i}>
                                <Skeleton className="h-4 w-24" />
                                <Skeleton className="h-9 w-full" />
                            </div>
                        ))}
                    </div>
                    <div className="flex justify-end">
                        <Skeleton className="h-9 w-32" />
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}

export function AdminTableSkeleton() {
    return (
        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
            <CardHeader>
                <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                    <div className="grid gap-1.5">
                        <Skeleton className="h-5 w-36" />
                        <Skeleton className="h-4 w-48" />
                    </div>
                    <div className="flex flex-col gap-2">
                        <div className="flex justify-end">
                            <Skeleton className="h-9 w-32" />
                        </div>
                        <div className="grid gap-2 sm:grid-cols-[1fr_1fr_160px]">
                            <Skeleton className="h-9 w-full" />
                            <Skeleton className="h-9 w-full" />
                            <Skeleton className="h-9 w-full" />
                        </div>
                    </div>
                </div>
            </CardHeader>
            <CardContent>
                <div className="overflow-hidden rounded-xl border border-(--lecturer-border)">
                    <div className="bg-muted/50 px-4 py-3">
                        <div className="grid grid-cols-6 gap-4">
                            {Array.from({ length: 6 }).map((_, i) => (
                                <Skeleton className="h-4" key={i} />
                            ))}
                        </div>
                    </div>
                    {Array.from({ length: 6 }).map((_, i) => (
                        <div
                            className="border-t border-(--lecturer-border) px-4 py-3"
                            key={i}
                        >
                            <div className="grid grid-cols-6 gap-4">
                                <div className="grid gap-1">
                                    <Skeleton className="h-4 w-28" />
                                    <Skeleton className="h-3 w-36" />
                                </div>
                                <Skeleton className="h-5 w-16 self-center rounded-full" />
                                <Skeleton className="h-5 w-14 self-center rounded-full" />
                                <Skeleton className="h-4 w-10 self-center" />
                                <Skeleton className="h-4 w-20 self-center" />
                                <div className="flex justify-end gap-2">
                                    <Skeleton className="h-7 w-12" />
                                    <Skeleton className="h-7 w-7" />
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </CardContent>
        </Card>
    );
}

export function AdminDashboardSkeleton() {
    return (
        <section className="grid gap-4 md:grid-cols-3">
            {Array.from({ length: 3 }).map((_, i) => (
                <Card
                    className="border-(--lecturer-border) bg-(--lecturer-surface)"
                    key={i}
                >
                    <CardHeader className="gap-3">
                        <div className="flex items-center justify-between gap-3">
                            <Skeleton className="size-11 rounded-xl" />
                            <Skeleton className="h-5 w-16 rounded-full" />
                        </div>
                        <div className="grid gap-2">
                            <Skeleton className="h-4 w-20" />
                            <Skeleton className="h-8 w-16" />
                        </div>
                    </CardHeader>
                </Card>
            ))}
        </section>
    );
}