35 lines
937 B
JavaScript

'use client'
import { useCallback } from 'react'
export default function QSelect({ placeholder, options, disabled = false, dark = false, value, onChange }) {
// const options = [
// { id: 's01', value: 'cat', name: '고양이' },
// { id: 's02', value: 'dog', name: '개' },
// { id: 's03', value: 'lion', name: '사자' },
// { id: 's04', value: 'tiger', name: '호랑이' },
// ]
const handleChange = useCallback(
(e) => {
onChange(e.target.value)
},
[onChange],
)
return (
<select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
{placeholder && (
<option value="" disabled hidden>
{placeholder}
</option>
)}
{options.map((option) => (
<option key={option.name} value={option.value}>
{option.name}
</option>
))}
</select>
)
}