37 lines
1.3 KiB
Vue
37 lines
1.3 KiB
Vue
<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>
|