From ab1e852b6cabc0047844edd6719361e040475253 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 11 Jan 2024 18:48:55 -0600
Subject: [PATCH] refactor: abstract button compnoent props type

---
 web/components/Brand/Button.vue | 24 +++++-------------------
 web/types/ui/button.ts          | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 web/types/ui/button.ts

diff --git a/web/components/Brand/Button.vue b/web/components/Brand/Button.vue
index aa60cf3fa..fd2e45a51 100644
--- a/web/components/Brand/Button.vue
+++ b/web/components/Brand/Button.vue
@@ -1,24 +1,8 @@
 <script setup lang="ts">
-import {
-  computed,
-  type Component,
-} from 'vue';
+import { computed } from 'vue';
+
+import type { ButtonProps } from '~/types/ui/button';
 
-export interface ButtonProps {
-  btnStyle?: 'black' | 'fill' | 'gray' | 'outline' | 'outline-black' | 'outline-white' | 'underline' | 'white';
-  btnType?: 'button' | 'submit' | 'reset';
-  click?: () => void;
-  disabled?: boolean;
-  download?: boolean;
-  external?: boolean;
-  href?: string;
-  icon?: Component;
-  iconRight?: Component;
-  iconRightHoverDisplay?: boolean;
-  // iconRightHoverAnimate?: boolean;
-  size?: '12px' | '14px' | '16px' | '18px' | '20px' | '24px';
-  text?: string;
-}
 const props = withDefaults(defineProps<ButtonProps>(), {
   btnStyle: 'fill',
   btnType: 'button',
@@ -30,6 +14,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   // iconRightHoverAnimate: true,
   size: '16px',
   text: '',
+  title: '',
 });
 
 defineEmits(['click']);
@@ -111,6 +96,7 @@ const classes = computed(() => {
     :target="external ? '_blank' : ''"
     :type="!href ? btnType : ''"
     :class="classes.button"
+    :title="title"
     @click="click ?? $emit('click')"
   >
     <div
diff --git a/web/types/ui/button.ts b/web/types/ui/button.ts
new file mode 100644
index 000000000..97fbed984
--- /dev/null
+++ b/web/types/ui/button.ts
@@ -0,0 +1,16 @@
+export interface ButtonProps {
+  btnStyle?: 'black' | 'fill' | 'gray' | 'outline' | 'outline-black' | 'outline-white' | 'underline' | 'white';
+  btnType?: 'button' | 'submit' | 'reset';
+  click?: () => void;
+  disabled?: boolean;
+  download?: boolean;
+  external?: boolean;
+  href?: string;
+  icon?: Component;
+  iconRight?: Component;
+  iconRightHoverDisplay?: boolean;
+  // iconRightHoverAnimate?: boolean;
+  size?: '12px' | '14px' | '16px' | '18px' | '20px' | '24px';
+  text?: string;
+  title?: string;
+}