48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
lines: { type: Number, default: 3 },
|
|
showAvatar: { type: Boolean, default: false },
|
|
showImage: { type: Boolean, default: false },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full animate-pulse">
|
|
<div class="rounded-lg border border-gray-200 bg-white shadow-sm p-6">
|
|
<!-- Header with avatar (optional) -->
|
|
<div v-if="showAvatar" class="flex items-center gap-3 mb-4">
|
|
<div class="h-10 w-10 rounded-full bg-gray-200"></div>
|
|
<div class="flex-1 space-y-2">
|
|
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
|
|
<div class="h-3 bg-gray-100 rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image (optional) -->
|
|
<div v-if="showImage" class="h-48 bg-gray-200 rounded-lg mb-4"></div>
|
|
|
|
<!-- Content lines -->
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="(line, index) in lines"
|
|
:key="index"
|
|
class="h-4 bg-gray-100 rounded"
|
|
:class="{
|
|
'w-full': index === lines - 1,
|
|
'w-5/6': index !== lines - 1 && index % 2 === 0,
|
|
'w-4/6': index !== lines - 1 && index % 2 === 1,
|
|
}"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Footer buttons (optional) -->
|
|
<div class="flex gap-2 mt-6">
|
|
<div class="h-9 bg-gray-100 rounded w-24"></div>
|
|
<div class="h-9 bg-gray-100 rounded w-24"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|