aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web/components/admin/InvitesListSkeleton.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/components/admin/InvitesListSkeleton.tsx')
-rw-r--r--apps/web/components/admin/InvitesListSkeleton.tsx55
1 files changed, 55 insertions, 0 deletions
diff --git a/apps/web/components/admin/InvitesListSkeleton.tsx b/apps/web/components/admin/InvitesListSkeleton.tsx
new file mode 100644
index 00000000..19e8088d
--- /dev/null
+++ b/apps/web/components/admin/InvitesListSkeleton.tsx
@@ -0,0 +1,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>
+ );
+}