feat: more to explore (#360)

components/tag/TagCard.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { Tag } from 'masto'
+
+const {
+  tag,
+} = $defineProps<{
+  tag: Tag
+}>()
+
+const to = $computed(() => new URL(tag.url).pathname)
+</script>
+
+<template>
+  <NuxtLink :to="to" block p4 hover:bg-active flex justify-between>
+    <div>
+      <h4 text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
+        <span>#</span>
+        <span hover:underline>{{ tag.name }}</span>
+      </h4>
+      <CommonTrending :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
+    </div>
+    <div flex items-center>
+      <CommonTrendingCharts :history="tag.history" />
+    </div>
+  </NuxtLink>
+</template>

components/tag/TagCardSkeleton.vue

@@ -0,0 +1,11 @@
+<template>
+  <div p4 flex justify-between>
+    <div flex="~ col 1 gap-2">
+      <div flex class="skeleton-loading-bg" h-5 w-30 rounded />
+      <div flex class="skeleton-loading-bg" h-4 w-45 rounded />
+    </div>
+    <div flex items-center>
+      <div flex class="skeleton-loading-bg" h-9 w-15 rounded />
+    </div>
+  </div>
+</template>