apps/web/components/admin/InvitesListSkeleton.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import { AdminCard } from "@/components/admin/AdminCard";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const headerWidths = ["w-40", "w-28", "w-20", "w-20"];

export default function InvitesListSkeleton() {
  return (
    <AdminCard>
      <div className="flex flex-col gap-4">
        <div className="mb-2 flex items-center justify-between">
          <Skeleton className="h-6 w-48" />
          <Skeleton className="h-9 w-9" />
        </div>

        <Table>
          <TableHeader>
            <TableRow>
              {headerWidths.map((width, index) => (
                <TableHead key={`invite-list-header-${index}`}>
                  <Skeleton className={`h-4 ${width}`} />
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {Array.from({ length: 2 }).map((_, rowIndex) => (
              <TableRow key={`invite-list-row-${rowIndex}`}>
                {headerWidths.map((width, cellIndex) => (
                  <TableCell key={`invite-list-cell-${rowIndex}-${cellIndex}`}>
                    {cellIndex === headerWidths.length - 1 ? (
                      <div className="flex gap-2">
                        <Skeleton className="h-6 w-6" />
                        <Skeleton className="h-6 w-6" />
                      </div>
                    ) : (
                      <Skeleton className={`h-4 ${width}`} />
                    )}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </AdminCard>
  );
}