51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
size?: "large" | "medium" | "small" | "extra-small";
|
|
disabled?: boolean;
|
|
icon?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: "medium",
|
|
disabled: false,
|
|
icon: "",
|
|
});
|
|
|
|
// 크기별 스타일 클래스
|
|
const sizeClasses = {
|
|
large: "px-10 h-16 text-lg rounded-lg",
|
|
medium: "px-10 h-14 text-base rounded-lg",
|
|
small: "px-10 h-12 text-sm rounded-lg",
|
|
"extra-small": "px-6 h-10 text-sm rounded",
|
|
};
|
|
|
|
// 상태별 스타일 클래스
|
|
const getStateClasses = (disabled: boolean) => {
|
|
if (disabled) {
|
|
return "bg-white/10 text-gray-400 cursor-not-allowed";
|
|
}
|
|
|
|
return "bg-gray-700 text-white cursor-pointer";
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
:class="[
|
|
'group relative inline-flex items-center font-medium transition-all duration-200 border border-gray-600/30 overflow-hidden',
|
|
sizeClasses[size],
|
|
getStateClasses(props.disabled),
|
|
]"
|
|
:disabled="disabled"
|
|
>
|
|
<span
|
|
v-if="!disabled"
|
|
class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-200 rounded-inherit"
|
|
></span>
|
|
<span class="relative">
|
|
<slot />
|
|
<span v-if="icon" :class="['flex-shrink-0']" v-html="icon" />
|
|
</span>
|
|
</button>
|
|
</template>
|