lots of stuff

frontend/components/Base/Button.vue

@@ -1,10 +1,30 @@
 <template>
-  <button
-    :disabled="disabled || loading"
+  <NuxtLink
+    v-if="to"
+    :to="to"
+    v-bind="attributes"
     class="btn"
     ref="submitBtn"
     :class="{
       loading: loading,
+      'btn-sm': size === 'sm',
+      'btn-lg': size === 'lg',
+    }"
+  >
+    <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
+      <slot name="icon" />
+    </label>
+    <slot />
+  </NuxtLink>
+  <button
+    v-else
+    v-bind="attributes"
+    class="btn"
+    ref="submitBtn"
+    :class="{
+      loading: loading,
+      'btn-sm': size === 'sm',
+      'btn-lg': size === 'lg',
     }"
   >
     <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
@@ -15,7 +35,9 @@
 </template>
 
 <script setup lang="ts">
-  defineProps({
+  type Sizes = 'sm' | 'md' | 'lg';
+
+  const props = defineProps({
     loading: {
       type: Boolean,
       default: false,
@@ -24,6 +46,32 @@
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String as () => Sizes,
+      default: 'md',
+    },
+    to: {
+      type: String as () => string | null,
+      default: null,
+    },
+  });
+
+  const attributes = computed(() => {
+    if (props.to) {
+      return {
+        href: props.to,
+      };
+    }
+    return {
+      disabled: props.disabled || props.loading,
+    };
+  });
+
+  const is = computed(() => {
+    if (props.to) {
+      return 'a';
+    }
+    return 'button';
   });
 
   const submitBtn = ref(null);