import Image from "next/image";

export default function PlaneShapeTab12(){
    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_tab12.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={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={2600}/>
                                        </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>
    )
}