51 lines
1.2 KiB
Vue
51 lines
1.2 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 class="relative">
|
|
<slot />
|
|
<span v-if="icon" :class="['flex-shrink-0']" v-html="icon" />
|
|
</span>
|
|
</button>
|
|
</template>
|