caadiq
3df639c815
- 가격 입력 시 Tab으로 다음 활성 가격 칸으로 이동 (체크박스 건너뜀) - 최대 인원 기본값 6 → 3 (요즘 보스 기본) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
30 lines
1.1 KiB
JavaScript
30 lines
1.1 KiB
JavaScript
/**
|
|
* 커스텀 체크박스
|
|
* <Checkbox checked={x} onChange={(checked) => ...} />
|
|
*/
|
|
export default function Checkbox({ checked, onChange, disabled, className = '', size = 'md', tabIndex }) {
|
|
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}
|
|
tabIndex={tabIndex}
|
|
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>
|
|
)
|
|
}
|