45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
rows: { type: Number, default: 5 },
|
|
cols: { type: Number, default: 4 },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full animate-pulse">
|
|
<div class="rounded-lg border border-gray-200 bg-white shadow-sm overflow-hidden">
|
|
<!-- Table header skeleton -->
|
|
<div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
|
|
<div class="flex gap-4">
|
|
<div
|
|
v-for="i in cols"
|
|
:key="i"
|
|
class="h-4 bg-gray-200 rounded flex-1"
|
|
:class="{ 'max-w-[150px]': i === 1 }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<!-- Table body skeleton -->
|
|
<div class="divide-y divide-gray-200">
|
|
<div
|
|
v-for="row in rows"
|
|
:key="row"
|
|
class="px-6 py-4 flex gap-4 items-center"
|
|
>
|
|
<div
|
|
v-for="i in cols"
|
|
:key="i"
|
|
class="h-4 bg-gray-100 rounded flex-1"
|
|
:class="{
|
|
'max-w-[120px]': i === 1,
|
|
'max-w-[100px]': i === 2,
|
|
}"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|