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>

resources/js/Pages/Superuser/Menu/Index.vue

@@ -10,6 +10,9 @@ import Swal from 'sweetalert2'
 import Select from '@vueform/multiselect'
 import Nested from './Nested.vue'
 import Modal from '@/Components/Modal.vue'
+import Close from '@/Components/Button/Close.vue'
+import ButtonGreen from '@/Components/Button/Green.vue'
+import ButtonBlue from '@/Components/Button/Blue.vue'
 
 const self = getCurrentInstance()
 const { permissions, routes, icons } = defineProps({
@@ -144,12 +147,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
       <template #header>
         <div class="flex items-center space-x-2 p-2 bg-gray-200 dark:bg-gray-800">
-          <button @click.prevent="show" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
-            <div class="flex items-center space-x-1">
-              <Icon name="plus" />
-              <p class="uppercase font-semibold">create</p>
-            </div>
-          </button>
+          <ButtonGreen @click.prevent="show">
+            <Icon name="plus" />
+            <p class="uppercase font-semibold">create</p>
+          </ButtonGreen>
         </div>
       </template>
 
@@ -166,7 +167,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
         <template #header>
           <div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800">
-            <Icon @click.prevent="close" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
+            <Close @click.prevent="close" />
           </div>
         </template>
 
@@ -245,13 +246,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
                 <p class="text-sm uppercase">{{ form.icon }}</p>
                 
-                <button @click.prevent="icon = true" type="button" class="bg-blue-600 hover hover:bg-blue-700 rounded-md px-3 py-1 text-white text-sm transition-all">
-                  <div class="flex items-center space-x-1">
-                    <Icon name="edit" />
-
-                    <p class="uppercase font-semibold">change</p>
-                  </div>
-                </button>
+                <ButtonBlue @click.prevent="icon = true" type="button">
+                  <Icon name="edit" />
+                  <p class="uppercase font-semibold">change</p>
+                </ButtonBlue>
               </div>
             </div>
           </div>
@@ -259,12 +257,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
         <template #footer>
           <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 py-1 px-2">
-            <button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-white text-sm transition-all">
-              <div class="flex items-center space-x-1">
-                <Icon name="check" />
-                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-              </div>
-            </button>
+            <ButtonGreen type="submit">
+              <Icon name="check" />
+              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+            </ButtonGreen>
           </div>
         </template>
       </Card>

resources/js/Pages/Superuser/Permission/Index.vue

@@ -8,6 +8,10 @@ import Card from '@/Components/Card.vue'
 import Icon from '@/Components/Icon.vue'
 import { Inertia } from '@inertiajs/inertia'
 import Modal from '@/Components/Modal.vue'
+import Close from '@/Components/Button/Close.vue'
+import ButtonGreen from '@/Components/Button/Green.vue'
+import ButtonBlue from '@/Components/Button/Blue.vue'
+import ButtonRed from '@/Components/Button/Red.vue'
 
 const self = getCurrentInstance()
 const permissions = ref([])
@@ -99,12 +103,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     <Card class="bg-gray-50 dark:bg-slate-700 shadow-md">
       <template #header>
         <div class="flex items-center space-x-2 bg-gray-200 dark:bg-gray-800 p-2">
-          <button @click.prevent="show()" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
-            <div class="flex items-center space-x-1">
-              <Icon name="plus" />
-              <p class="font-semibold uppercase">create</p>
-            </div>
-          </button>
+          <ButtonGreen v-if="can('create permission')" @click.prevent="show()">
+            <Icon name="plus" />
+            <p class="font-semibold uppercase">create</p>
+          </ButtonGreen>
         </div>
       </template>
 
@@ -142,7 +144,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border dark:border-gray-700">
         <template #header>
           <div class="flex items-center space-x-2 justify-end bg-gray-200 dark:bg-gray-800 dark:text-gray-50 p-2">
-            <Icon @click.prevent="close" name="times" class="border border-transparent dark:bg-gray-700 px-2 py-1 rounded-md cursor-pointer transition-all bg-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:border-gray-600" />
+            <Close @click.prevent="close" />
           </div>
         </template>
 
@@ -163,12 +165,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
         <template #footer>
           <div class="flex items-center space-x-2 justify-end bg-gray-200 dark:bg-gray-800 text-white px-2 py-1">
-            <button type="submit" class="bg-green-600 rounded-md px-3 py-1 text-sm transition-all hover:bg-green-700">
-              <div class="flex items-center space-x-1">
-                <Icon name="check" />
-                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-              </div>
-            </button>
+            <ButtonGreen type="submit">
+              <Icon name="check" />
+              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+            </ButtonGreen>
           </div>
         </template>
       </Card>

resources/js/Pages/Superuser/Role/Index.vue

@@ -10,6 +10,10 @@ import Th from '@/Components/DataTable/Th.vue'
 import Swal from 'sweetalert2'
 import Select from '@vueform/multiselect'
 import Modal from '@/Components/Modal.vue'
+import Close from '@/Components/Button/Close.vue'
+import ButtonGreen from '@/Components/Button/Green.vue'
+import ButtonBlue from '@/Components/Button/Blue.vue'
+import ButtonRed from '@/Components/Button/Red.vue'
 
 const self = getCurrentInstance()
 const { permissions } = defineProps({
@@ -101,12 +105,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
       <template #header>
         <div class="flex items-center space-x-2 p-2 bg-gray-200 dark:bg-gray-800">
-          <button v-if="can('create role')" @click.prevent="show" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
-            <div class="flex items-center space-x-1">
-              <Icon name="plus" />
-              <p class="uppercase font-semibold">create</p>
-            </div>
-          </button>
+          <ButtonGreen v-if="can('create role')" @click.prevent="show">
+            <Icon name="plus" />
+            <p class="uppercase font-semibold">create</p>
+          </ButtonGreen>
         </div>
       </template>
 
@@ -159,19 +161,15 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     </td>
                     <td class="px-2 py-1 border dark:border-gray-800">
                       <div class="flex items-center space-x-2">
-                        <button @click.prevent="edit(role, refresh)" class="bg-blue-600 rounded-md px-3 py-1 transition-all hover:bg-blue-700 text-white text-sm">
-                          <div class="flex items-center space-x-2">
-                            <Icon name="edit" />
-                            <p class="uppercase">edit</p>
-                          </div>
-                        </button>
+                        <ButtonBlue @click.prevent="edit(role, refresh)">
+                          <Icon name="edit" />
+                          <p class="uppercase">edit</p>
+                        </ButtonBlue>
 
-                        <button @click.prevent="destroy(role, refresh)" class="bg-red-600 rounded-md px-3 py-1 transition-all hover:bg-red-700 text-white text-sm">
-                          <div class="flex items-center space-x-2">
-                            <Icon name="trash" />
-                            <p class="uppercase">delete</p>
-                          </div>
-                        </button>
+                        <ButtonRed @click.prevent="destroy(role, refresh)">
+                          <Icon name="trash" />
+                          <p class="uppercase">delete</p>
+                        </ButtonRed>
                       </div>
                     </td>
                   </tr>
@@ -195,7 +193,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
         <template #header>
           <div class="flex items-center justify-end bg-gray-200 dark:bg-gray-800 p-2">
-            <Icon @click.prevent="close" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
+            <Close @click.prevent="close" />
           </div>
         </template>
 
@@ -233,13 +231,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
         <template #footer>
           <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 px-2 py-1">
-            <button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
-              <div class="flex items-center space-x-1">
-                <Icon name="check" />
-
-                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-              </div>
-            </button>
+            <ButtonGreen type="submit">
+              <Icon name="check" />
+              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+            </ButtonGreen>
           </div>
         </template>
       </Card>

resources/js/Pages/Superuser/User/Index.vue

@@ -10,6 +10,10 @@ import Th from '@/Components/DataTable/Th.vue'
 import Swal from 'sweetalert2'
 import Select from '@vueform/multiselect'
 import Modal from '@/Components/Modal.vue'
+import ButtonGreen from '@/Components/Button/Green.vue'
+import ButtonBlue from '@/Components/Button/Blue.vue'
+import ButtonRed from '@/Components/Button/Red.vue'
+import Close from '@/Components/Button/Close.vue'
 
 const self = getCurrentInstance()
 const { permissions, roles } = defineProps({
@@ -128,12 +132,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
       <template #header>
         <div class="flex items-center space-x-2 p-2 bg-gray-200 dark:bg-gray-800">
-          <button v-if="can('create user')" @click.prevent="show" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
-            <div class="flex items-center space-x-1">
-              <Icon name="plus" />
-              <p class="uppercase font-semibold">create</p>
-            </div>
-          </button>
+          <ButtonGreen v-if="can('create user')" @click.prevent="show">
+            <Icon name="plus" />
+            <p class="uppercase font-semibold">create</p>
+          </ButtonGreen>
         </div>
       </template>
 
@@ -217,19 +219,15 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.updated_at).toLocaleString('id') }}</td>
                     <td class="px-2 py-1 border dark:border-gray-800">
                       <div class="flex items-center space-x-2">
-                        <button @click.prevent="edit(user, refresh)" class="bg-blue-600 rounded-md px-3 py-1 transition-all hover:bg-blue-700 text-white text-sm">
-                          <div class="flex items-center space-x-2">
-                            <Icon name="edit" />
-                            <p class="uppercase">edit</p>
-                          </div>
-                        </button>
+                        <ButtonBlue @click.prevent="edit(user, refresh)">
+                          <Icon name="edit" />
+                          <p class="uppercase">edit</p>
+                        </ButtonBlue>
 
-                        <button @click.prevent="destroy(user, refresh)" class="bg-red-600 rounded-md px-3 py-1 transition-all hover:bg-red-700 text-white text-sm">
-                          <div class="flex items-center space-x-2">
-                            <Icon name="trash" />
-                            <p class="uppercase">delete</p>
-                          </div>
-                        </button>
+                        <ButtonRed @click.prevent="destroy(user, refresh)">
+                          <Icon name="trash" />
+                          <p class="uppercase">delete</p>
+                        </ButtonRed>
                       </div>
                     </td>
                   </tr>
@@ -248,20 +246,12 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     </Card>
   </DashboardLayout>
 
-  <transition
-    enterActiveClass="transition-all duration-500"
-    leaveActiveClass="transition-all duration-500"
-    enterFromClass="opacity-0"
-    leaveToClass="opacity-0">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 z-20 overflow-hidden blur-3xl"></div>
-  </transition>
-
   <Modal :show="open">
     <form @submit.prevent="submit" class="w-full max-w-xl sm:max-w-5xl shadow-xl">
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
         <template #header>
           <div class="flex items-center justify-end bg-gray-200 dark:bg-gray-800 p-2">
-            <Icon @click.prevent="close" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
+            <Close @click.prevent="close" />
           </div>
         </template>
 
@@ -354,13 +344,11 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
         <template #footer>
           <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 px-2 py-1">
-            <button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
-              <div class="flex items-center space-x-1">
-                <Icon name="check" />
+            <ButtonGreen type="submit">
+              <Icon name="check" />
 
-                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-              </div>
-            </button>
+              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+            </ButtonGreen>
           </div>
         </template>
       </Card>