import Image from "next/image";

export default function PlaneShapeTab01(){
    return(
        <>
            <div className="plane-shape-wrapper">
                <div className="plane-box shape-box">
                    <h3 className="plane-box-tit">設定</h3>
                    <div className="shape-box-inner">
                        <div className="shape-img">
                            <Image src="/static/images/canvas/plane_tab01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                        </div>
                        <div className="shape-data">
                            <div className="eaves-keraba-table">
                                <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: '57px'}}>
                                                <input type="text" className="input-origin plane block" defaultValue={4500}/>
                                            </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: '57px'}}>
                                                <input type="text" className="input-origin plane block" defaultValue={2600}/>
                                            </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: '57px'}}>
                                                <input type="text" className="input-origin plane block" defaultValue={3500}/>
                                            </div>
                                            <span className="thin">mm</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="plane-box direction-box">
                    <h3 className="plane-box-tit">設定</h3>
                    <div className="plane-direction-box">
                        <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>
            </div>
            <div className="plane-tab-guide">
                ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。
            </div>
        </>
    )
}