26 lines
785 B
JavaScript
26 lines
785 B
JavaScript
'use client'
|
|
import { useState } from 'react'
|
|
|
|
export default function QSelectBox({ title = '', options, onChange }) {
|
|
const [openSelect, setOpenSelect] = useState(false)
|
|
const [selected, setSelected] = useState(title === '' ? options[0].name : title)
|
|
|
|
const handleClickSelectOption = (option) => {
|
|
setSelected(option.name)
|
|
onChange?.(option)
|
|
}
|
|
|
|
return (
|
|
<div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
|
|
<p>{selected}</p>
|
|
<ul className="select-item-wrap">
|
|
{options?.map((option) => (
|
|
<li key={option.id} className="select-item">
|
|
<button onClick={() => handleClickSelectOption(option)}>{option.name}</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|