first commit

resources/js/Components/StartButton.vue

@@ -0,0 +1,56 @@
+<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>