💄 Better docs page

components/activity/Carousel.vue

@@ -1,46 +0,0 @@
-<template>
-  <v-carousel v-if="!loading" show-arrows="hover" cycle hide-delimiters progress="primary">
-    <v-carousel-item v-for="(item, i) in items" :key="i">
-      <v-sheet color="rgba(0, 0, 0, .4)"  class="h-full w-full flex items-center justify-center post-container overflow-scroll">
-        <post-item class="mt-5 mb-2" force-show-content :post="item" />
-      </v-sheet>
-    </v-carousel-item>
-  </v-carousel>
-  <div v-else class="w-full h-full flex items-center justify-center">
-    <v-progress-circular indeterminate />
-  </div>
-</template>
-
-<script setup lang="ts">
-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>
-.post-container::-webkit-scrollbar {
-  display: none;
-}
-
-.post-container {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-</style>

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>