<script lang="ts">
	let { rows = 5 }: { rows?: number } = $props();
</script>

{#each Array(rows) as _, i (i)}
	<tr>
		<td class="px-6 py-4">
			<div class="h-4 w-48 animate-pulse rounded bg-gray-200"></div>
			<div class="mt-1 h-3 w-24 animate-pulse rounded bg-gray-100"></div>
		</td>
		<td class="px-6 py-4"><div class="h-5 w-16 animate-pulse rounded-full bg-gray-200"></div></td>
		<td class="px-6 py-4"><div class="h-4 w-20 animate-pulse rounded bg-gray-200"></div></td>
		<td class="px-6 py-4"><div class="h-2 w-32 animate-pulse rounded-full bg-gray-200"></div></td>
		<td class="px-6 py-4"><div class="h-4 w-28 animate-pulse rounded bg-gray-200"></div></td>
		<td class="px-6 py-4 text-right"
			><div class="ml-auto h-7 w-20 animate-pulse rounded bg-gray-200"></div></td
		>
	</tr>
{/each}
