46 lines
1.6 KiB
JavaScript
46 lines
1.6 KiB
JavaScript
import { useRecoilState } from 'recoil'
|
|
import { settingModalSecondOptionsState } from '@/store/settingAtom'
|
|
|
|
export default function SecondOption() {
|
|
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
|
|
const { option1, option2 } = settingsModalOptions
|
|
const onClickOption = (option) => {
|
|
option.selected = !option.selected
|
|
|
|
setSettingModalOptions({ option1: option1, option2: option2 })
|
|
}
|
|
return (
|
|
<>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title">フォントとサイズの変更</h3>
|
|
<div className="flex-check-box for2">
|
|
{settingsModalOptions.option1.map((item) => (
|
|
<button className="arr-btn">
|
|
<span>{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={() => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{item.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex-check-box for-line">
|
|
<button className="arr-btn">
|
|
<span>寸法線の設定</span>
|
|
</button>
|
|
<button className="arr-btn">
|
|
<span>図面サイズの設定</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|