mirror of
https://github.com/PaiGramTeam/PaiGramDocs.git
synced 2024-11-26 18:20:40 +00:00
29 lines
977 B
Vue
29 lines
977 B
Vue
<script setup lang="ts">
|
|
import type { navItem } from '../../../favorites/types'
|
|
|
|
defineProps<{
|
|
navData: navItem[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid auto-rows-auto grid-cols-2 gap-[12px]">
|
|
<section v-for="navItem of navData" :key="navItem.id">
|
|
<a :href="navItem.link" rel="noreferrer" target="_blank" class="group">
|
|
<section
|
|
class="flex h-full flex-col border-1 border-solid border-[var(--vp-c-border)]/[.55] rounded-[8px] leading-[24px] px-[24px] py-[12px] group-hover:shadow"
|
|
>
|
|
<span class="text-gray-600 group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100">
|
|
{{ navItem.text }}
|
|
</span>
|
|
<span
|
|
class="mb-auto text-sm text-gray-700 opacity-50 dark:text-gray-300 dark:group-hover:text-gray-50 min-h-[20px]"
|
|
>
|
|
{{ navItem.desc ?? navItem.text }}
|
|
</span>
|
|
</section>
|
|
</a>
|
|
</section>
|
|
</div>
|
|
</template>
|