saas_app/src/app/_components/loading/skeletonTable.tsx

81 lines
No EOL
4.3 KiB
TypeScript

export default function SkeletonTable() {
return (
<div>
<div role="status" aria-busy="true" aria-label="Carregando tabela" className="p-4 w-full">
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr>
<th className="px-4 py-2 text-left">
<div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</th>
<th className="px-4 py-2 text-left">
<div className="h-4 w-28 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</th>
<th className="px-4 py-2 text-left">
<div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</th>
<th className="px-4 py-2 text-left">
<div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</th>
</tr>
</thead>
<tbody>
<tr className="border-t">
<td className="px-4 py-3">
<div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-32 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
</tr>
<tr className="border-t">
<td className="px-4 py-3">
<div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-28 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
</tr>
<tr className="border-t">
<td className="px-4 py-3">
<div className="h-4 w-28 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
<td className="px-4 py-3">
<div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
}