36 lines
1000 B
Vue
36 lines
1000 B
Vue
|
<template>
|
||
|
|
<button
|
||
|
|
:class="[baseStyles, variantStyles, className]"
|
||
|
|
v-bind="$attrs"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
variant?: 'primary' | 'secondary' | 'danger';
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
variant: 'primary',
|
||
|
|
className: ''
|
||
|
|
});
|
||
|
|
|
||
|
|
const baseStyles = "relative px-4 py-2 text-xs font-bold uppercase tracking-wider border-2 transition-transform active:translate-y-1";
|
||
|
|
|
||
|
|
const variantStyles = computed(() => {
|
||
|
|
if (props.variant === 'primary') {
|
||
|
|
return "bg-[#2b193f] border-[#f6b26b] text-[#f6b26b] hover:bg-[#3d2459] hover:text-white";
|
||
|
|
} else if (props.variant === 'secondary') {
|
||
|
|
return "bg-[#1b1026] border-[#4a3b5e] text-[#8f80a0] hover:bg-[#2b193f] hover:text-[#e0d8f0]";
|
||
|
|
} else if (props.variant === 'danger') {
|
||
|
|
return "bg-[#2b193f] border-[#d95763] text-[#d95763] hover:bg-[#3d2459] hover:text-white";
|
||
|
|
}
|
||
|
|
return "";
|
||
|
|
});
|
||
|
|
</script>
|