32 lines
853 B
Vue
32 lines
853 B
Vue
|
<script setup>
|
||
|
|
defineProps({
|
||
|
|
routes: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
light: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div v-if="routes.length" class="flex flex-wrap gap-2">
|
||
|
|
<NuxtLink
|
||
|
|
v-for="route in routes"
|
||
|
|
:key="`${route.label}-${route.href}`"
|
||
|
|
:to="route.href"
|
||
|
|
class="inline-flex items-center gap-2 rounded-full border px-3 py-2 text-xs transition-all duration-300"
|
||
|
|
:class="
|
||
|
|
light
|
||
|
|
? 'border-white/20 bg-white/10 text-white/88 hover:border-white/35 hover:bg-white/15'
|
||
|
|
: 'border-gm-border bg-white text-[#555] hover:border-gm-green hover:text-gm-green'
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<span class="opacity-65">{{ route.label }}</span>
|
||
|
|
<span class="font-mono text-[11px]">{{ route.path || route.href }}</span>
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
</template>
|