Router e Página Criar Produto

website/src/App.css

@@ -60,4 +60,9 @@
 
 .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
   background-color: rgb(116, 0, 0);
-} 
+} 
+
+main {
+  padding: 50px;
+  min-height: calc(100vh - 150px) !important;
+}

website/src/App.js

@@ -1,30 +1,63 @@
-import React, { useState, useEffect } from "react";
-import './App.css';
+import React from "react";
 import _service from '@netuno/service-client';
-import TabelaProdutos from './Components/TabelaProdutos/index.jsx';
+import { Layout, Menu } from 'antd';
 
-import Cards from "./Components/Cards/index.jsx";
-import { Layout, Menu, Breadcrumb } from 'antd';
-import NavBar from "./Components/NavBar";
-const { Header, Content, Footer } = Layout;
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 
+import './App.css';
+import Cards from './pages/Cards'
+import TabelaLojas from "./pages/TabelaLojas";
+import TabelaCategorias from "./pages/TabelaCategorias";
+import TabelaProdutos from "./pages/TabelaProdutos";
+import CriarProduto from "./pages/CriarProduto";
 
-function App() {
+const { Header, Content, Footer } = Layout;
 
+export default () => {
 
   return (
-    <div className="App">
-
-      <Layout className="layout">
-        <Content style={{ padding: '0 50px' }}>
-          <div className="site-layout-content">
-            <NavBar/>
-          </div>
+    <Router>
+      <Layout>
+        <Header>
+          <Menu mode="horizontal" >
+            <Menu.Item><Link to="/">Home</Link></Menu.Item>
+            <Menu.Item><Link to="/lojas">Lojas</Link></Menu.Item>
+            <Menu.Item><Link to="/categorias">Categorias</Link></Menu.Item>
+            <Menu.Item><Link to="/produtos">Produtos</Link></Menu.Item>
+            <Menu.Item><Link to="/criarProduto">Criar Produto</Link></Menu.Item>
+          </Menu>
+        </Header>
+        <Content>
+          <Switch>
+            <Route path="/lojas">
+              <TabelaLojas />
+            </Route>
+            <Route path="/categorias">
+              <TabelaCategorias />
+            </Route>
+            <Route path="/produtos">
+              <TabelaProdutos />
+            </Route>
+            <Route path="/criarProduto">
+              <CriarProduto />
+            </Route>
+            <Route path="/">
+              <Cards />
+            </Route>
+          </Switch>
         </Content>
-        <Footer style={{ textAlign: 'center' }}>Gestor de Mercearia ©2021</Footer>
+        <Footer>
+          <h2>Gestão de Mercearias</h2>
+          Desenvolvimento de demonstração.
+        </Footer>
       </Layout>
-    </div>
+    </Router>
   );
-}
+};
+
 
-export default App;

website/src/Components/NavBar/index.css

@@ -1,34 +0,0 @@
-.site-layout-content {
-    min-height: 280px;
-    padding: 24px;
-    background: #fff;
-  }
-  #components-layout-demo-top .logo {
-    float: left;
-    width: 120px;
-    height: 31px;
-    margin: 16px 24px 16px 0;
-    background: rgba(255, 255, 255, 0.3);
-  }
-  .ant-row-rtl #components-layout-demo-top .logo {
-    float: right;
-    margin: 16px 0 16px 24px;
-  }
-
-  .ant-layout-header {
-    height: 64px;
-    padding: 0 50px;
-    color: rgba(255, 255, 255, 0.85);
-    line-height: 64px;
-    background: #f0f0f0;
-}
-
-.ant-menu-dark.ant-menu-horizontal > .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
-    top: 0;
-    margin-top: 0;
-    padding: 0 20px;
-    border-color: #383838;
-        border-bottom-color: rgb(56, 56, 56);
-    border-bottom: 0;
-  } 
-

website/src/Components/NavBar/index.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import './index.css';
-
-import { Tabs } from 'antd';
-import TabelaProdutos from '../TabelaProdutos/index.jsx';
-import TabelaLojas from '../TabelaLojas/index.jsx';
-import TabelaCategorias from '../TabelaCategorias/index.jsx';
-import Cards from '../Cards/index.jsx';
-
-const { TabPane } = Tabs;
-
-function callback(key) {
-  console.log(key);
-}
-const NavBar = () => {
-  return (
-    <Tabs defaultActiveKey="1" onChange={callback}>
-      <TabPane tab="Home" key="1">
-        <Cards/>
-    </TabPane>
-      <TabPane tab="Mercearias" key="2">
-       <TabelaLojas/>
-    </TabPane>
-      <TabPane tab="Categorias" key="3">
-        <TabelaCategorias/>
-    </TabPane>
-    <TabPane tab="Produtos" key="4">
-        <TabelaProdutos/>
-    </TabPane>
-    </Tabs>
-
-  );
-}
-
-export default NavBar;

website/src/pages/CriarProduto/index.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from "react";
+
+import _service from '@netuno/service-client';
+import { Form, Input, Button, Select } from 'antd';
+import './index.less';
+
+const layout = {
+    labelCol: {
+        span: 8,
+    },
+    wrapperCol: {
+        span: 16,
+    },
+};
+const tailLayout = {
+    wrapperCol: {
+        offset: 8,
+        span: 16,
+    },
+};
+
+export default () => {
+
+
+    const onFinish = (values) => {
+        console.log('Success:', values);
+    };
+
+    const onFinishFailed = (errorInfo) => {
+        console.log('Failed:', errorInfo);
+    };
+
+    return (
+        <div >
+           
+            <div className="criarProd"> 
+            <h1 style={{textAlign: 'center'}}>Criar Produto</h1>
+            <Form
+                {...layout}
+                name="basic"
+                initialValues={{ remember: true }}
+                onFinish={onFinish}
+                onFinishFailed={onFinishFailed}
+            >
+                <Form.Item
+                    label="Nome do Produto"
+                    name="nome"
+                    rules={[{ required: true, message: 'Insira o nome do Produto.' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+                <Form.Item
+                    label="Categoria"
+                    name="categoria"
+                    rules={[{ required: true }]}
+                >
+                    <Select
+                        placeholder="Escolha a categoria"    
+                    >   
+                    </Select>
+                </Form.Item>
+
+                <Form.Item
+                    label="Quantidade"
+                    name="quantidade"
+                    rules={[{ required: true, message: 'Defina o stock inicial.' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+                <Form.Item
+                    label="Preço"
+                    name="preco"
+                    rules={[{ required: true, message: 'Defina o preço do produto.' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+                <Form.Item {...tailLayout}>
+                    <Button type="primary" htmlType="submit">
+                        Submit
+        </Button>
+                </Form.Item>
+            </Form>
+            </div>
+        </div>
+    );
+};

website/src/pages/CriarProduto/index.less

@@ -0,0 +1,5 @@
+.criarProd {
+    max-width: 600px;
+    margin-left: 100px;
+    width: 30%;
+}