💄 Better docs page

components/activity/List.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-card v-if="!loading" density="compact" variant="outlined">
+    <div class="h-[500px] overflow-y-auto no-scrollbar">
+      <div v-for="item in items" class="mt-5 mb-2">
+        <post-item :key="item.id" force-show-content :post="item" />
+      </div>
+      <div class="mt-4 mb-5 flex justify-center">
+        <v-btn :text="t('seeMore')" size="small" variant="text" to="/activity" />
+      </div>
+    </div>
+  </v-card>
+  <v-card v-else density="compact" variant="outlined">
+    <div class="w-full h-full flex items-center justify-center">
+      <v-progress-circular indeterminate />
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const config = useRuntimeConfig()
+
+const items = ref<any[]>([])
+
+const loading = ref(false)
+
+async function load() {
+  loading.value = true
+
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/co/posts?take=5&realm=${config.public.solarRealm}`)
+  const result = await res.json()
+
+  items.value.push(...result.data)
+
+  loading.value = false
+}
+
+onMounted(() => {
+  load()
+})
+</script>
+
+<style scoped>
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  width: 0;
+  display: none;
+}
+</style>