30 lines
1.1 KiB
React
30 lines
1.1 KiB
React
|
/**
|
||
|
|
* 커스텀 체크박스
|
||
|
|
* <Checkbox checked={x} onChange={(checked) => ...} />
|
||
|
|
*/
|
||
|
|
export default function Checkbox({ checked, onChange, disabled, className = '', size = 'md' }) {
|
||
|
|
const sizeCls = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5'
|
||
|
|
const iconSize = size === 'sm' ? 'text-[10px]' : 'text-xs'
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
role="checkbox"
|
||
|
|
aria-checked={checked}
|
||
|
|
disabled={disabled}
|
||
|
|
onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked) }}
|
||
|
|
className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center transition ${
|
||
|
|
checked
|
||
|
|
? 'border-emerald-500 bg-emerald-500 text-white'
|
||
|
|
: 'border-white/20 bg-gray-950 hover:border-white/40'
|
||
|
|
} ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${className}`}
|
||
|
|
>
|
||
|
|
{checked && (
|
||
|
|
<svg className={iconSize} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M2.5 6L5 8.5L9.5 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|