Dev branch

resources/js/Components/Skeleton/SkeletonCard.vue

@@ -0,0 +1,47 @@
+<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>
+
+