import Image from "next/image";

export default function ObjectOptionTab04(){
    return(
        <>
            <div className="discrimination-box mb10">
                <div className="discrimination-tit">サイズ設定</div>
                <div className="object-size-wrap">
                    <div className="object-size-img">
                        <Image src="/static/images/canvas/object_img02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="object-size-input">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                <span className="object-input-num">①</span>
                                棟の長さ
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="input-grid mr5" style={{width: '60px'}}>
                                            <input type="text" className="input-origin block" defaultValue={2000}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                棟の出幅
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="input-grid mr5" style={{width: '60px'}}>
                                            <input type="text" className="input-origin block" defaultValue={1000}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                <span className="object-input-num">②</span>
                                幅
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="input-grid mr5" style={{width: '60px'}}>
                                            <input type="text" className="input-origin block" defaultValue={4000}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                幅の出幅
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="input-grid mr5" style={{width: '60px'}}>
                                            <input type="text" className="input-origin block" defaultValue={500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                勾配
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="input-grid mr5" style={{width: '60px'}}>
                                            <input type="text" className="input-origin block" defaultValue={4}/>
                                        </div>
                                        <span className="thin">寸法</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="discrimination-box">
                <div className="discrimination-tit">方向の選択</div>
                <div className="object-direction-wrap">
                    <div className="plane-direction">
                        <span className="top">北</span>
                        <span className="right">ドン</span>
                        <span className="bottom">南</span>
                        <span className="left">立つ</span>
                        <button className="plane-btn up"></button>
                        <button className="plane-btn right"></button>
                        <button className="plane-btn down act"></button>
                        <button className="plane-btn left"></button>
                    </div>
                </div>
            </div>
        </>
    )
}