feat: Button Component

components/TButton.vue

@@ -0,0 +1,65 @@
+<template>
+  <button type="button" :class="classes" :title="title">
+    <slot>
+      <TIcon v-if="icon" :size="iconSize" :name="icon" />
+      <span v-if="label !== false"> {{ label }}</span>
+    </slot>
+  </button>
+</template>
+
+<script>
+import TIcon from '~/components/TIcon'
+
+export default {
+  components: {
+    TIcon,
+  },
+
+  props: {
+    title: {
+      type: String,
+      default: 'continue',
+    },
+    type: {
+      type: String,
+      default: 'simple',
+    },
+    label: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    iconSize: {
+      type: String,
+      default: '',
+    },
+  },
+
+	computed: {
+		classes() {
+			const xbase =
+				'flex whitespace-nowrap justify-start items-center py-2 px-4 font-medium space-x-2 cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-offset-2';
+			const xrounded = xbase + ' text-sm leading-4 shadow rounded-full';
+			const primaryColor =
+				' bg-black text-white border-gray-900 hover:bg-gray-800';
+			const destructiveColor =
+				' bg-red-500 text-white border-red-500 hover:bg-red-800';
+			const baseColor =
+				' bg-white text-gray-700 border-gray-300 hover:bg-gray-100';
+
+			const map = {
+				simple: xrounded + baseColor,
+				primary: xrounded + primaryColor,
+				secondary: xrounded + baseColor,
+				tertiary: xrounded + ' underline shadow-none',
+				destructive: xrounded + destructiveColor,
+				icon: 'rounded-full hover:text-primary',
+			};
+			return map[this.type];
+		},
+	},
+}
+</script>

components/TIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <component :class="classes" :is="heroIcons[name]" />
+</template>
+
+<script>
+import * as heroIcons from '@heroicons/vue/24/solid'
+
+export default {
+  data() {
+    return {
+      heroIcons,
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: String,
+    },
+  },
+  computed: {
+    classes() {
+      return !this.size ? 'w-6 h-6' : `w-${this.size} h-${this.size}`
+    },
+  },
+}
+</script>

package.json

@@ -6,15 +6,19 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "devDependencies": {
     "@nuxt/kit": "3.0.0-rc.14",
-    "@nuxtjs/tailwindcss": "^5.3.5",
+    "@nuxtjs/tailwindcss": "^6.1.3",
     "nuxt": "3.0.0-rc.14"
   },
   "dependencies": {
     "@formkit/vue": "1.0.0-beta.11",
+    "@heroicons/vue": "^2.0.16",
     "@intlify/nuxt3": "^0.2.4"
   }
 }