31 lines
1.1 KiB
JavaScript

import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
export default function Eaves({ offsetRef, pitchRef, pitchText }) {
const { getMessage } = useMessage()
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
return (
<>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
</div>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('eaves.offset')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
</div>
<span className="thin">mm</span>
</div>
</>
)
}