add. Closes #8

components/UiButton/UiButton.vue

@@ -2,6 +2,8 @@
   <component
     :is="tag"
     :type="tag === 'button' ? 'button' : ''"
+    :to="path"
+    :href="path"
     class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer shadow-[0px_16px_50px_-16px_rgba(229,30,125,1)]"
     :class="[baseStyle, size]"
     data-ui="ui-button"
@@ -11,36 +13,40 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed } from "vue";
-import { colorVariants } from "./UiButton.params.js";
+import { toRefs, computed } from 'vue'
+import { colorVariants } from './UiButton.params.js'
 
 const props = defineProps({
   tag: {
     type: String,
-    default: "button",
+    default: 'button',
   },
   variants: {
-    type: String as () => "primary" | "secondary",
-    default: "primary",
+    type: String as () => 'primary' | 'secondary',
+    default: 'primary',
     validator: (value) => {
-      return ["primary", "secondary"].includes(value as string);
+      return ['primary', 'secondary'].includes(value as string)
     },
   },
   size: {
     type: String,
-    default: "font-bold",
+    default: 'font-bold',
   },
-});
+  path: {
+    type: String,
+    default: '',
+  },
+})
 
-const { tag, variants, size } = toRefs(props);
+const { tag, variants, size } = toRefs(props)
 
-const colorClasses: Record<"primary" | "secondary", string[]> = {
+const colorClasses: Record<'primary' | 'secondary', string[]> = {
   primary: colorVariants.primary,
   secondary: colorVariants.secondary,
-};
+}
 
 const baseStyle = computed(() => {
-  const variant = variants.value as "primary" | "secondary";
-  return colorClasses[variant]?.join(" ") || "";
-});
+  const variant = variants.value as 'primary' | 'secondary'
+  return colorClasses[variant]?.join(' ') || ''
+})
 </script>