Initialer Laravel Commit für BetiX

resources/js/components/ui/button.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}>();
+
+const classes = computed(() => {
+    const base = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+
+    const variants = {
+        primary: "bg-[#ff007a] text-white hover:bg-[#ff007a]/90 shadow-[0_0_15px_rgba(255,0,122,0.4)]",
+        secondary: "bg-[#00f2ff] text-black hover:bg-[#00f2ff]/80 shadow-[0_0_15px_rgba(0,242,255,0.4)]",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-red-500 text-white hover:bg-red-500/90",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground text-white"
+    };
+
+    const sizes = {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 px-4 py-2",
+        lg: "h-10 px-8"
+    };
+
+    return `${base} ${variants[props.variant || 'primary']} ${sizes[props.size || 'md']}`;
+});
+</script>
+
+<template>
+    <button :type="type || 'button'" :class="classes" :disabled="disabled">
+        <slot />
+    </button>
+</template>