33 lines
854 B
Vue
33 lines
854 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
items: { type: Number, default: 5 },
|
|
showAvatar: { type: Boolean, default: true },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full animate-pulse">
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="item in items"
|
|
:key="item"
|
|
class="flex items-center gap-4 p-4 bg-white rounded-lg border border-gray-200"
|
|
>
|
|
<!-- Avatar -->
|
|
<div v-if="showAvatar" class="h-12 w-12 rounded-full bg-gray-200 flex-shrink-0"></div>
|
|
|
|
<!-- Content -->
|
|
<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>
|
|
|
|
<!-- Action -->
|
|
<div class="h-8 w-8 rounded bg-gray-100 flex-shrink-0"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|