estabilizando ant disiger no projeto e criando primero form

first-app/src/App.tsx

@@ -2,15 +2,24 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
-
 import './App.css'
-import Home from "./pages/home/home";
+
+//pages
+import PageBase from "./pages/PageBase/PageBase";
+import NewCliente from "./pages/Cliente/NewCliente";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Home/>,
+    element: <PageBase/>,
+    children:[
+      {
+        path:"/cliente/new",
+        element: <NewCliente/>
+      }
+    ]
   },
+
 ]);
 
 function App() {

first-app/src/components/ClienteForm.tsx

@@ -0,0 +1,87 @@
+import { Button, Form, Input, Select } from 'antd';
+import styles from '../pages/Cliente/Cliente.module.css';
+import { useEffect } from 'react';
+
+export interface FormClienteProps {
+  values?: any,
+  btnTitle: string,
+  eventEmiter: any
+}
+
+function ClienteForm(props: FormClienteProps) {
+
+  const onFinish = (values: any) => {
+    props.eventEmiter(values);
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  useEffect(() => {
+    //TO DO
+    //GET ALL COUNTRIES FOR SHOW IN SELECT ELEMENT 
+  }, [])
+
+
+  return (
+    <Form
+      className={styles.form_cliente}
+      name="basic"
+      layout="vertical"
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+    >
+      <Form.Item
+        label="Nome"
+        name="nome"
+        initialValue={props.values ? props.values.nome : ''}
+        rules={[{ required: true, message: 'Nome é obrigatorio!' }]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label="E-mail"
+        name="email"
+        initialValue={props.values ? props.values.email : ''}
+        rules={[{ required: true, message: 'E-mail é obrigatorio!' }]}
+      >
+        <Input type='email' />
+      </Form.Item>
+
+      <Form.Item
+        label="Telefone"
+        name="telefone"
+        initialValue={props.values ? props.values.telefone : ''}
+        rules={[{ required: true, message: 'Numero de telefone é obrigatorio!' }]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label="Pais"
+        name="pais"
+        rules={[{ required: true, message: 'É obrigatorio informar o pais!' }]}
+      >
+        <Select
+          options={[
+            { value: 'jack', label: 'Jack' },
+            { value: 'lucy', label: 'Lucy' },
+            { value: 'Yiminghe', label: 'yiminghe' },
+          ]}
+        />
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          {props.btnTitle}
+        </Button>
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default ClienteForm;

first-app/src/components/sideBar.tsx

@@ -0,0 +1,61 @@
+import { Menu, MenuProps } from "antd";
+import Sider from "antd/es/layout/Sider"
+import { useState } from "react";
+import {
+    UserOutlined,
+    ShoppingCartOutlined,
+    InboxOutlined
+  } from '@ant-design/icons';
+import { Link } from "react-router-dom";
+
+function SideBar () {
+
+    const [collapsed, setCollapsed] = useState(false);
+
+    type MenuItem = Required<MenuProps>['items'][number];
+
+  function getItem(
+    label: React.ReactNode,
+    key: React.Key,
+    icon?: React.ReactNode,
+    children?: MenuItem[
+
+    ],
+  ): MenuItem {
+    return {
+      key,
+      icon,
+      children,
+      label,
+    } as MenuItem;
+  }
+
+  const items: MenuItem[] = [
+    getItem('Clientes', 'sub1', <UserOutlined />, [
+      getItem((<Link to="/cliente/new">Novo Cliente</Link>), '1'),
+      getItem('Listar todos', '3'),
+      getItem('Alex', '4'),
+    ]),
+    getItem('Produtos', 'sub2', <InboxOutlined />, [
+      getItem('Tom', '5'),
+      getItem('Bill', '6'),
+      getItem('Alex', '7'),
+    ]),
+    getItem('Encomendas', 'sub3', <ShoppingCartOutlined />, [
+      getItem('jdj', '8'),
+      getItem('Bill', '9'),
+      getItem('Alex', '10'),
+    ]),
+
+  ];
+
+
+  return (
+    <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
+        <div className="demo-logo-vertical" />
+        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
+      </Sider>
+  )
+}
+
+export default SideBar

first-app/src/index.css

@@ -1,4 +1,14 @@
 html, body {
   width: 100%;
   height: 100%;
+}
+
+.container{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #FFF;
+  padding: 24;
 }

first-app/src/pages/Cliente/Cliente.module.css

@@ -0,0 +1,3 @@
+.form_cliente{
+    width: 600px;
+}

first-app/src/pages/Cliente/NewCliente.tsx

@@ -0,0 +1,25 @@
+
+
+//components
+import ClienteForm from '../../components/ClienteForm'
+
+function Cliente() {
+
+    const handleSubmit = (values:any) => {
+        console.log('Componente Cliente:',values)
+
+        //TO DO
+        //CREATED SERVICE REGISTER CUSTOMER
+    }
+   
+    return (
+        <>
+            <ClienteForm 
+                btnTitle='Cadastrar' 
+                eventEmiter={handleSubmit}
+            />
+        </>
+    )
+}
+
+export default Cliente

first-app/src/pages/PageBase/PageBase.tsx

@@ -0,0 +1,25 @@
+import { Layout} from 'antd';
+import SideBar from '../../components/sideBar';
+import { Outlet } from 'react-router-dom';
+
+function PageBase() {
+
+  const { Header, Content, Footer } = Layout;
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <SideBar/>
+      <Layout>
+        <Header style={{ padding: 0, background:'#000' }} />
+        <Content style={{ margin: '0 16px' }}>
+          <div className='container'>
+              <Outlet/>
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
+      </Layout>
+    </Layout>
+  )
+}
+
+export default PageBase

first-app/src/pages/home/home.tsx

@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import {
-  DesktopOutlined,
-  FileOutlined,
-  PieChartOutlined,
-  TeamOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
-import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu, theme } from 'antd';
-
-
-function Home () {
-
-  const { Header, Content, Footer, Sider } = Layout;
-
-  const [collapsed, setCollapsed] = useState(false);
-
-  const {
-    token: { colorBgContainer },
-  } = theme.useToken();
-
-type MenuItem = Required<MenuProps>['items'][number];
-
-function getItem(
-  label: React.ReactNode,
-  key: React.Key,
-  icon?: React.ReactNode,
-  children?: MenuItem[],
-): MenuItem {
-  return {
-    key,
-    icon,
-    children,
-    label,
-  } as MenuItem;
-}
-
-const items: MenuItem[] = [
-  getItem('Option 1', '1', <PieChartOutlined />),
-  getItem('Option 2', '2', <DesktopOutlined />),
-  getItem('User', 'sub1', <UserOutlined />, [
-    getItem('Tom', '3'),
-    getItem('Bill', '4'),
-    getItem('Alex', '5'),
-  ]),
-  getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
-  getItem('Files', '9', <FileOutlined />),
-];
-
-
-  return (
-    <Layout style={{ minHeight: '100vh' }}>
-      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-        <div className="demo-logo-vertical" />
-        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
-      </Sider>
-      <Layout>
-        <Header style={{ padding: 0, background: colorBgContainer }} />
-        <Content style={{ margin: '0 16px' }}>
-          <Breadcrumb style={{ margin: '16px 0' }}>
-            <Breadcrumb.Item>User</Breadcrumb.Item>
-            <Breadcrumb.Item>Bill</Breadcrumb.Item>
-          </Breadcrumb>
-          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
-            Bill is a cat.
-          </div>
-        </Content>
-        <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
-      </Layout>
-    </Layout>
-  )
-}
-
-export default Home