feat: more to explore (#360)

components/status/StatusPreviewCardSkeleton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineProps<{
+  /** For the preview image, only the small image mode is displayed */
+  square?: boolean
+  /** When it is root card in the list, not appear as a child card */
+  root?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    of-hidden
+    :class="{
+      'flex': square,
+      'p-4': root,
+      'rounded-lg border border-base': !root,
+    }"
+  >
+    <div
+      flex flex-col
+      display-block of-hidden
+      border="base"
+      :class="{
+        'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': square,
+        'w-full aspect-[1.91] border-b': !square,
+        'rounded-lg': root,
+      }"
+    >
+      <div w-full h-full class="skeleton-loading-bg" />
+    </div>
+    <div
+      px3 max-h-2xl
+      flex-1 flex flex-col flex-gap-2 sm:flex-gap-3
+      :class="[
+        root ? 'py2.5 sm:py3' : 'py3  justify-center sm:justify-start',
+      ]"
+    >
+      <div flex class="skeleton-loading-bg" h-4 w-30 rounded :class="root ? '' : 'hidden sm:block'" />
+      <div flex class="skeleton-loading-bg" h-5 w="4/5" rounded />
+      <div flex="~ col gap-2">
+        <div flex class="skeleton-loading-bg" h-4 w-full rounded />
+        <div sm:flex hidden class="skeleton-loading-bg" h-4 w="2/5" rounded />
+      </div>
+    </div>
+  </div>
+</template>