สร้างและจัด Layout ให้ปุ่มเพิ่มสินค้า

รายละเอียดสำหรับเรียนรู้ React ปี 2020-2023 โดยโค้ชพล ดูหลักสูตรได้ที่ https://www.nextflow.in.th/react-training

สร้างและจัด Layout ให้ปุ่มเพิ่มสินค้า

// src/App.js

// ทำการ import component ที่จำเป็นเพิ่มเติม
import { Layout, Row, Col, Button, Divider } from 'antd';

//..
return (
      <div>
        <Layout className="layout">
          <HeaderBar />
          <Content style=>
            <div
              style=>

              {/* สร้าง Layout ให้ปุ่มเพิ่มสินค้าใหม่ */}
              <Row gutter={16}>
                <Col span={20}></Col>
                <Col span={4}>
                  {/* ปุ่มเพิ่มสินค้าใหม่ */}
                  <Button type="primary" size="large" block>Add Item</Button>
                </Col>
              </Row>
              <Divider/>
               {/* จัด ItemList อยู่ด้านล่าง */}
              <Row gutter={16}>
                <Col span={24}><ItemList /></Col>
              </Row>
              
            </div>
          </Content>
          <Footer style=>React Redux Workshop ©2012-2021 Created by Nextflow.in.th</Footer>
        </Layout>,
      </div>
    );