Page Stubs and Click-Through Flow

resources/js/Components/AppButton.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from 'vue'
+import { Link } from '@inertiajs/vue3'
+import { ArrowPathIcon } from '@heroicons/vue/20/solid'
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (value) => ['primary', 'danger', 'ghost'].includes(value),
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg'].includes(value),
+  },
+  href: {
+    type: String,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['click'])
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+const component = computed(() => props.href ? Link : 'button')
+
+const buttonClasses = computed(() => {
+  const classes = [
+    'inline-flex items-center justify-center gap-2',
+    'font-semibold rounded-lg',
+    'transition-all duration-200',
+    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface',
+  ]
+
+  // Size classes
+  if (props.size === 'sm') {
+    classes.push('px-3 py-1.5 text-sm')
+  } else if (props.size === 'md') {
+    classes.push('px-5 py-2.5 text-base')
+  } else if (props.size === 'lg') {
+    classes.push('px-7 py-3 text-lg')
+  }
+
+  // Variant classes
+  if (isDisabled.value) {
+    classes.push('opacity-50 cursor-not-allowed')
+    if (props.variant === 'primary') {
+      classes.push('bg-primary text-gray-900')
+    } else if (props.variant === 'danger') {
+      classes.push('bg-red-500 text-white')
+    } else if (props.variant === 'ghost') {
+      classes.push('bg-transparent text-gray-400')
+    }
+  } else {
+    if (props.variant === 'primary') {
+      classes.push(
+        'bg-primary text-gray-900',
+        'hover:bg-secondary hover:text-white',
+        'focus:ring-primary'
+      )
+    } else if (props.variant === 'danger') {
+      classes.push(
+        'bg-red-500 text-white',
+        'hover:bg-red-600',
+        'focus:ring-red-500'
+      )
+    } else if (props.variant === 'ghost') {
+      classes.push(
+        'bg-transparent text-gray-400',
+        'hover:text-white hover:bg-white/10',
+        'focus:ring-gray-400'
+      )
+    }
+  }
+
+  return classes.join(' ')
+})
+
+const handleClick = (event) => {
+  if (!isDisabled.value) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="component"
+    :href="href"
+    :class="buttonClasses"
+    :disabled="isDisabled"
+    :type="href ? undefined : 'button'"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <ArrowPathIcon v-if="loading" class="h-5 w-5 animate-spin" />
+    <slot />
+  </component>
+</template>