From 5d162cb8e0f5d594905a56a9b16f4f68df5f6631 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Tue, 21 Jan 2025 01:21:09 +0000
Subject: Improve frontend

---
 components/Button.vue | 71 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 29 deletions(-)

(limited to 'components/Button.vue')

diff --git a/components/Button.vue b/components/Button.vue
index 00cc1e7..97ff928 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -1,9 +1,33 @@
-<script setup>
+<script setup lang="ts">
 import { Loader2Icon } from 'lucide-vue-next'
+import { defineProps } from 'vue';
+
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String as PropType<"button" | "submit" | "reset">,
+    default: "",
+  },
+  kind: {
+    type: String as PropType<"primary" | "secondary">,
+    default: "primary",
+  },
+});
 </script>
 
 <template>
-  <button :type="type" :disabled="disabled || loading">
+  <button :type="type" :disabled="disabled || loading" :class="kind">
     <Loader2Icon v-if="loading" class="icon-loader" />
     <span>
       <slot />
@@ -11,30 +35,6 @@ import { Loader2Icon } from 'lucide-vue-next'
   </button>
 </template>
 
-<script>
-export default {
-  name: "Button",
-  props: {
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-
 <style scoped>
 button {
   width: 100%;
@@ -43,12 +43,10 @@ button {
   padding: 0.5rem 1rem;
   border: 1px solid transparent;
   border-radius: 0.375rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   font-size: var(--text-small);
   font-family: var(--font-family);
   font-weight: 500;
   color: white;
-  background-color: var(--color-primary);
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
@@ -60,7 +58,6 @@ button:hover {
 button:focus {
   outline: none;
   border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
 }
 
 button:disabled {
@@ -76,6 +73,22 @@ button:disabled {
   width: 1.25rem;
   color: white;
 }
+  
+button.primary {
+  background-color: var(--color-primary);
+}
+  
+button.secondary {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+}
+  
+button.secondary:hover {
+  background-color: var(--color-background-muted);
+  border: 1px solid var(--color-primary-dark);
+  color: var(--color-primary-dark);
+}
 
 @keyframes spin {
   0% {
-- 
cgit v1.2.3-70-g09d2