Implement more reka ui and attempt to fix review issues.

src/components/ui/Button.vue

@@ -0,0 +1,36 @@
+<template>
+    <button
+        :type="type"
+        :class="[
+            'inline-block w-auto cursor-pointer rounded-sm py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:text-gray-400 dark:hover:bg-dark-300',
+            variant === 'primary' ? 'bg-gray-300 dark:bg-dark-400' : 'bg-gray-300 dark:bg-dark-400',
+            customClass,
+        ]"
+        v-bind="$attrs"
+    >
+        <slot />
+    </button>
+</template>
+
+<script setup>
+defineOptions({
+    name: "UiButton",
+});
+
+defineProps({
+    type: {
+        type: String,
+        default: "button",
+        validator: val => ["button", "submit"].includes(val),
+    },
+    variant: {
+        type: String,
+        default: "primary",
+        validator: val => ["primary", "secondary"].includes(val),
+    },
+    customClass: {
+        type: String,
+        default: "",
+    },
+});
+</script>