Manuel Bustillo 4022928f1c
Some checks failed
Playwright Tests / test (pull_request) Failing after 1m12s
Build docker image / build-static-assets (pull_request) Failing after 4m27s
Display a skeleton while guests information is loading
2024-08-18 18:41:44 +02:00

35 lines
1.5 KiB
TypeScript

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>
);
}