53 lines
2.2 KiB
JavaScript
53 lines
2.2 KiB
JavaScript
import { useState } from 'react'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import Eaves from '@/components/floor-plan/modal/roofShape/passivity/Eaves'
|
|
import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
|
|
import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
|
|
export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
|
|
const { getMessage } = useMessage()
|
|
const [buttonAct, setButtonAct] = useState(1)
|
|
const buttons = [
|
|
{ id: 1, name: getMessage('eaves') },
|
|
{ id: 2, name: getMessage('gable') },
|
|
{ id: 3, name: getMessage('windage') },
|
|
]
|
|
return (
|
|
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
|
|
<div className={`modal-pop-wrap xxm`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
|
|
<button className="modal-close" onClick={() => setShowRoofShapePassivitySettingModal(false)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-btn-wrap">
|
|
{buttons.map((button) => (
|
|
<button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
|
|
{button.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="modal-bottom-border-bx">
|
|
<div className="setting-tit">{getMessage('setting')}</div>
|
|
<div className="discrimination-box">
|
|
{buttonAct === 1 && <Eaves />}
|
|
{buttonAct === 2 && <Gable />}
|
|
{buttonAct === 3 && <Shed />}
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame sub-tab mr5">{getMessage('common.setting.rollback')}</button>
|
|
<button className="btn-frame sub-tab act">{getMessage('apply')}</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act">{getMessage('common.setting.finish')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|