feat(settings): about page

components/help/HelpPreview.vue

@@ -1,41 +1,7 @@
 <script setup lang="ts">
-interface Team {
-  github: string
-  display: string
-  twitter: string
-  mastodon: string
-}
-
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
-
-const teams: Team[] = [
-  {
-    github: 'antfu',
-    display: 'Anthony Fu',
-    twitter: 'antfu7',
-    mastodon: 'antfu@mas.to',
-  },
-  {
-    github: 'patak-dev',
-    display: 'Patak',
-    twitter: 'patak_dev',
-    mastodon: 'patak@webtoo.ls',
-  },
-  {
-    github: 'danielroe',
-    display: 'Daniel Roe',
-    twitter: 'danielcroe',
-    mastodon: 'daniel@roe.dev',
-  },
-  {
-    github: 'sxzz',
-    display: 'sxzz',
-    twitter: 'sanxiaozhizi',
-    mastodon: 'sxzz@mas.to',
-  },
-].sort(() => Math.random() - 0.5)
 </script>
 
 <template>

components/settings/SettingsItem.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 const props = defineProps<{
   text?: string
+  content?: string
   description?: string
   icon?: string
-  to: string | Record<string, string>
+  to?: string | Record<string, string>
   command?: boolean
 }>()
 
@@ -12,13 +13,19 @@ const router = useRouter()
 useCommand({
   scope: 'Settings',
 
-  name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
+  name: () => props.text
+    ?? (props.to
+      ? typeof props.to === 'string'
+        ? props.to
+        : props.to.name
+      : ''
+    ),
   description: () => props.description,
   icon: () => props.icon || '',
-  visible: () => props.command,
+  visible: () => props.command && props.to,
 
   onActivate() {
-    router.push(props.to)
+    router.push(props.to!)
   },
 })
 </script>
@@ -28,7 +35,7 @@ useCommand({
     :to="to"
     exact-active-class="text-primary"
     block w-full group focus:outline-none
-    @click="$scrollToTop"
+    @click="to ? $scrollToTop() : undefined"
   >
     <div
       w-full flex w-fit px5 py3 md:gap2 gap4 items-center
@@ -37,6 +44,7 @@ useCommand({
     >
       <div flex-1 flex items-center md:gap2 gap4>
         <div
+          v-if="$slots.icon || icon"
           flex items-center justify-center flex-shrink-0
           :class="$slots.description ? 'w-12 h-12' : ''"
         >
@@ -50,14 +58,19 @@ useCommand({
               <span>{{ text }}</span>
             </slot>
           </p>
-          <p v-if="$slots.description" text-sm text-secondary>
+          <p v-if="$slots.description || description" text-sm text-secondary>
             <slot name="description">
               {{ description }}
             </slot>
           </p>
         </div>
       </div>
-      <div i-ri:arrow-right-s-line text-xl text-secondary-light class="rtl-flip" />
+      <p v-if="$slots.content || content" text-sm text-secondary>
+        <slot name="content">
+          {{ content }}
+        </slot>
+      </p>
+      <div v-if="to" i-ri:arrow-right-s-line text-xl text-secondary-light class="rtl-flip" />
     </div>
   </NuxtLink>
 </template>