40 lines
1.7 KiB
JavaScript
40 lines
1.7 KiB
JavaScript
'use client'
|
|
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
|
|
import { onlyNumberInputChange } from '@/util/input-utils'
|
|
|
|
export default function OuterLineWall(props) {
|
|
const { getMessage } = useMessage()
|
|
const { length1, setLength1, length1Ref, arrow1, setArrow1 } = useOuterLineWall()
|
|
return (
|
|
<div className="outline-wrap">
|
|
<div className="outline-inner">
|
|
<div className="outline-form">
|
|
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
|
|
<div className="input-grid" style={{ width: '63px' }}>
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
value={length1}
|
|
ref={length1Ref}
|
|
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
|
placeholder="3000"
|
|
/>
|
|
</div>
|
|
<button className="reset-btn"></button>
|
|
</div>
|
|
<div className="outline-form">
|
|
<span>{getMessage('modal.cover.outline.arrow')}</span>
|
|
<div className="grid-direction">
|
|
<button className={`direction up ${arrow1 === '↑' ? 'act' : ''}`} onClick={() => setArrow1('↑')}></button>
|
|
<button className={`direction down ${arrow1 === '↓' ? 'act' : ''}`} onClick={() => setArrow1('↓')}></button>
|
|
<button className={`direction left ${arrow1 === '←' ? 'act' : ''}`} onClick={() => setArrow1('←')}></button>
|
|
<button className={`direction right ${arrow1 === '→' ? 'act' : ''}`} onClick={() => setArrow1('→')}></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|