Manuel Bustillo
501bb3a81a
All checks were successful
Playwright Tests / test (pull_request) Has been skipped
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m12s
Add copyright notice / copyright_notice (pull_request) Successful in 1m32s
Build Nginx-based docker image / build-static-assets (push) Successful in 6m2s
37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
|
|
import Skeleton from '@/app/ui/skeleton';
|
|
|
|
export function SkeletonRow() {
|
|
return (
|
|
<tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
|
<td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
|
|
<td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
|
|
<td className="px-6 py-4">{<Skeleton className="w-[20ch] h-[1rem]" />}</td>
|
|
<td className="px-6 py-4">{<Skeleton className="w-[10ch] h-[1rem]" />}</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
export default function SkeletonTable() {
|
|
return (
|
|
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
|
|
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
|
<caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
|
|
Guests
|
|
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
|
Loading the list of guests...
|
|
</p>
|
|
</caption>
|
|
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
|
</thead>
|
|
<tbody>
|
|
{[...Array(20)].map((e, i) => <SkeletonRow />)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|