create button component

resources/js/Components/Button.vue

@@ -0,0 +1,7 @@
+<template>
+  <button class="rounded-md px-3 py-1 text-sm text-white transition-all duration-300">
+    <div class="flex items-center space-x-1">
+      <slot />
+    </div>
+  </button>
+</template>

resources/js/Components/Button/BLue.vue

@@ -0,0 +1,9 @@
+<script setup>
+import Button from '../Button.vue'
+</script>
+
+<template>
+  <Button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800">
+    <slot />
+  </Button>
+</template>

resources/js/Components/Button/Close.vue

@@ -0,0 +1,7 @@
+<script setup>
+import Icon from '@/Components/Icon.vue'
+</script>
+
+<template>
+  <Icon name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-800 border border-transparent dark:active:border-gray-600 rounded-md transition-all duration-300 cursor-pointer" />
+</template>

resources/js/Components/Button/Dark.vue

@@ -0,0 +1,9 @@
+<script setup>
+import Button from '../Button.vue'
+</script>
+
+<template>
+  <Button class="bg-gray-800 hover:bg-gray-600 active:bg-gray-800">
+    <slot />
+  </Button>
+</template>

resources/js/Components/Button/Green.vue

@@ -0,0 +1,9 @@
+<script setup>
+import Button from '../Button.vue'
+</script>
+
+<template>
+  <Button class="bg-green-600 hover:bg-green-700 active:bg-green-800">
+    <slot />
+  </Button>
+</template>

resources/js/Components/Button/Red.vue

@@ -0,0 +1,9 @@
+<script setup>
+import Button from '../Button.vue'
+</script>
+
+<template>
+  <Button class="bg-red-600 hover:bg-red-700 active:bg-red-800">
+    <slot />
+  </Button>
+</template>