create filters components

src/components/Button.vue

@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
 const props = defineProps({
   type: {
-    type: String as () => "button" | "submit" | "reset",
-    default: "button",
+    type: String as () => 'button' | 'submit' | 'reset',
+    default: 'button'
   },
   onClick: {
     type: Function as unknown as () => (payload: MouseEvent) => void,
-    default: () => { },
+    default: () => {}
   },
   label: {
     type: String,
-    default: "",
+    default: ''
   },
   disabled: {
     type: Boolean,
-    default: false,
+    default: false
   },
   isLoading: {
     type: Boolean,
-    default: false,
+    default: false
   },
   className: {
     type: String,
-    default: "",
+    default: ''
   },
   styleType: {
-    type: String as () => "filled" | "secondary" | "outline" | "text",
-    default: "filled"
+    type: String as () => 'filled' | 'secondary' | 'outline' | 'text',
+    default: 'filled'
   }
-});
+})
 
 const buttonStyle = computed(() => {
   switch (props.styleType) {
@@ -50,21 +50,39 @@ const buttonStyle = computed(() => {
 </script>
 
 <template>
-  <button :type="type" @click="onClick" :disabled="isLoading ? true : disabled"
-    :class="['px-3 py-2 mt-2 text-sm font-semibold w-full', buttonStyle, className]">
+  <button
+    :type="type"
+    @click="onClick"
+    :disabled="isLoading ? true : disabled"
+    :class="['px-3 py-2 text-sm font-semibold', buttonStyle, className]"
+  >
     <div class="flex items-center" v-if="!isLoading">
       <span class="me-1">{{ label }}</span>
       <slot></slot>
     </div>
     <span v-else>
       <center>
-        <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
-          viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-          </path>
+        <svg
+          class="animate-spin h-5 w-5 text-white"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
         </svg>
       </center>
     </span>
-  </button></template>
+  </button>
+</template>