40 lines
1.5 KiB
JavaScript
40 lines
1.5 KiB
JavaScript
import { useRecoilState } from 'recoil'
|
|
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
|
|
|
export default function FirstOption() {
|
|
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
|
|
const { option1, option2 } = settingsModalOptions
|
|
const onClickOption = (option) => {
|
|
option.selected = !option.selected
|
|
|
|
setSettingModalOptions({ option1, option2 })
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title light">※図面に表示する項目をクリックすると適用されます。</h3>
|
|
<div className="flex-check-box for2">
|
|
{settingsModalOptions?.option1?.map((item) => (
|
|
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{item.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title">画面表示</h3>
|
|
<div className="flex-check-box for-line">
|
|
{settingsModalOptions?.option2?.map((item) => (
|
|
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{item.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|