57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup>
|
|
import {NButton, NP, NFlex, NIcon} from "naive-ui";
|
|
import {Link} from "@inertiajs/vue3";
|
|
import {computed, h} from "vue";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
href: {
|
|
type: String,
|
|
default: '/'
|
|
},
|
|
icon: {
|
|
type: [Object, Function],
|
|
default: null
|
|
}
|
|
})
|
|
|
|
const buttonThemeOverride = {
|
|
heightLarge: '64px',
|
|
borderRadiusLarge: '8px'
|
|
}
|
|
|
|
const pThemeOverride = {
|
|
pMargin: '',
|
|
pLineHeight: '1.4'
|
|
}
|
|
|
|
const hasIcon = computed(() => props.icon !== null)
|
|
</script>
|
|
|
|
<template>
|
|
<NButton :tag="Link" :href="href" :theme-overrides="buttonThemeOverride" size="large" block class="justify-start! text-left!">
|
|
<template v-if="hasIcon" #icon>
|
|
<component :is="icon" v-if="icon" />
|
|
</template>
|
|
<NFlex vertical :size="2" :class="hasIcon ? 'ml-2' : ''">
|
|
{{ title }}
|
|
<NP :theme-overrides="pThemeOverride" depth="3">
|
|
{{ description }}
|
|
</NP>
|
|
</NFlex>
|
|
</NButton>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.n-button) {
|
|
@apply justify-start!;
|
|
}
|
|
</style>
|