| 1 | <script setup lang="ts"> |
| 2 | import type { Feature } from '../../../features/index.data' |
| 3 | import { withBase } from 'vitepress' |
| 4 | import { computed, ref } from 'vue' |
| 5 | import { data as features } from '../../../features/index.data' |
| 6 | |
| 7 | const rows = 6 |
| 8 | const offsetMap = Array.from({ length: rows }, () => Math.floor(Math.random() * 200)) |
| 9 | const featuresArr = Object.values(features) as Feature[] |
| 10 | const groupedFeatures = computed(() => { |
| 11 | const res: Feature[][] = Array.from({ length: rows }, () => []) |
| 12 | for (let i = 0; i < featuresArr.length; i++) { |
| 13 | res[i % rows].push(featuresArr[i]) |
| 14 | } |
| 15 | return res |
| 16 | }) |
| 17 | |
| 18 | const round = ref(0) |
| 19 | </script> |
| 20 | |
| 21 | <template> |
| 22 | <div class="relative w-full x-6 overflow-auto"> |
| 23 | <div class="flex flex-col gap-4 ml--50"> |
| 24 | <div v-for="group, i in groupedFeatures" :key="i" class="flex gap-4"> |
| 25 | <div :style="{ minWidth: `${offsetMap[i]}px` }" /> |
| 26 | <template v-for="r in [round, round + 1, round + 2]" :key="r"> |
| 27 | <a |
| 28 | v-for="feature, j in group" :key="j" :href="withBase(feature.link)" |
| 29 | class="px-3 py-2 rounded bg-$vp-c-bg-elv min-w-max !decoration-none" |
| 30 | > |
| 31 | {{ feature.title }} |
| 32 | </a> |
| 33 | </template> |
| 34 | </div> |
| 35 | </div> |
| 36 | <div class="absolute left-0 top-0 bottom-0 w-10 backdrop-blur" /> |
| 37 | </div> |
| 38 | </template> |
| 39 |