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>
+
+

resources/js/Components/Skeleton/SkeletonInline.vue

@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  width: { type: String, default: 'full' },
+  height: { type: String, default: '4' },
+  rounded: { type: String, default: 'md' },
+});
+
+const widthClasses = {
+  full: 'w-full',
+  '3/4': 'w-3/4',
+  '2/3': 'w-2/3',
+  '1/2': 'w-1/2',
+  '1/3': 'w-1/3',
+  '1/4': 'w-1/4',
+  '1/5': 'w-1/5',
+  auto: 'w-auto',
+};
+
+const heightClasses = {
+  2: 'h-2',
+  3: 'h-3',
+  4: 'h-4',
+  5: 'h-5',
+  6: 'h-6',
+  8: 'h-8',
+  12: 'h-12',
+};
+
+const roundedClasses = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  full: 'rounded-full',
+};
+</script>
+
+<template>
+  <div
+    class="animate-pulse bg-gray-200"
+    :class="[
+      widthClasses[width] || width,
+      heightClasses[height] || height,
+      roundedClasses[rounded] || rounded,
+    ]"
+  ></div>
+</template>
+
+

resources/js/Components/Skeleton/SkeletonList.vue

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

resources/js/Components/Skeleton/SkeletonTable.vue

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