feat: more to explore (#360)

components/common/CommonAlert.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+}>(), {
+  modelValue: true,
+})
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+  (event: 'close'): void
+}>()
+const visible = useVModel(props, 'modelValue', emits, { passive: true })
+
+function close() {
+  emits('close')
+  visible.value = false
+}
+</script>
+
+<template>
+  <div
+    flex="~ gap-2" justify-between items-center
+    class="border-b border-base text-sm text-secondary px4 py2 sm:py4"
+  >
+    <div>
+      <slot />
+    </div>
+    <button text-xl hover:text-primary bg-hover-overflow w-1.4em h-1.4em @click="close()">
+      <div i-ri:close-line />
+    </button>
+  </div>
+</template>

components/common/CommonRouteTabs.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+const { options, command, replace } = $defineProps<{
+  options: {
+    to: RouteLocationRaw
+    display: string
+    name?: string
+    icon?: string
+  }[]
+  command?: boolean
+  replace?: boolean
+}>()
+
+const router = useRouter()
+
+useCommands(() => command
+  ? options.map(tab => ({
+    scope: 'Tabs',
+
+    name: tab.display,
+    icon: tab.icon ?? 'i-ri:file-list-2-line',
+    onActivate: () => router.replace(tab.to),
+  }))
+  : [])
+</script>
+
+<template>
+  <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
+    <NuxtLink
+      v-for="(option, index) in options"
+      :key="option?.name || index"
+      :to="option.to"
+      :replace="replace"
+      relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
+      tabindex="1"
+      hover:bg-active transition-100
+      exact-active-class="children:(font-bold !border-primary !op100)"
+      @click="$scrollToTop"
+    >
+      <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 op50 hover:op70 border-transparent>{{ option.display }}</span>
+    </NuxtLink>
+  </div>
+</template>

components/common/CommonTrending.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { History } from 'masto'
+
+const {
+  history,
+  maxDay = 2,
+} = $defineProps<{
+  history: History[]
+  maxDay?: number
+}>()
+
+const ongoingHot = $computed(() => history.slice(0, maxDay))
+
+const people = $computed(() =>
+  ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
+)
+</script>
+
+<template>
+  <p>
+    {{ $t('command.n-people-in-the-past-n-days', [people, maxDay]) }}
+  </p>
+</template>

components/common/CommonTrendingCharts.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { History } from 'masto'
+import sparkline from '@fnando/sparkline'
+
+const {
+  history,
+} = $defineProps<{
+  history?: History[]
+}>()
+
+const historyNum = $computed(() => {
+  if (!history)
+    return [1, 1, 1, 1, 1, 1, 1]
+  return [...history].reverse().map(item => Number(item.accounts) || 0)
+})
+
+const sparklineEl = $ref<SVGSVGElement>()
+
+watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
+  if (!sparklineEl)
+    return
+  sparkline(sparklineEl, historyNum)
+})
+</script>
+
+<template>
+  <svg ref="sparklineEl" class="sparkline" width="60" height="40" stroke-width="3" />
+</template>