routing between pages and create component structure map

src/App.js

@@ -1,10 +1,12 @@
-
-import './App.css';
+import './App.module.css';
+import Routs from './Routes/index';
 
 function App() {
   return (
-    <div className="App">
-
+    <div>
+
+    <Routs/>
+
     </div>
   );
 }

src/App.module.css

@@ -0,0 +1,5 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}

src/Components/Navbar/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import styles from './style.module.css'
+ const Navbar = () => {
+  return (
+    <div className={styles.links}>
+       <Link to="/">خانه</Link>
+       <Link to="/AdminLogin">مدیریت</Link>
+       <Link to="/Cart">سبدخرید</Link>
+    </div>
+  )
+}
+export default Navbar

src/Components/Navbar/style.module.css

@@ -0,0 +1,6 @@
+.links{
+    direction: rtl;
+    display: flex;
+    gap: 1rem;
+   justify-content: center; 
+}

src/Components/button/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from "./style.module.css"
+ const Button = ({title,children}) => {
+  return (
+    <button className={styles.btn} title={title}>{children}</button>
+  )
+}
+export default Button;

src/Components/button/style.module.css

@@ -0,0 +1,7 @@
+.btn{
+    width: 6rem;
+    height: 2rem;
+    background-color: rgb(84, 181, 134);
+    border: none;
+    border-radius: 6px;
+}

src/Layouts/header/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+
+const Header= () => {
+  return (
+    <div>
+
+    </div>
+  )
+}
+export default Header;

src/Pages/AdminLogin/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import Button from '../../Components/button';
+const AdminLogin = () => {
+  return (
+    <>
+      <Link to="/AdminLogin/AdminPanel"><Button >{"ورود"}</Button></Link>
+      <Link to="/">بازگشت</Link>
+      <h2>Adminlogin form page</h2>
+    </>
+  )
+}
+export default AdminLogin;

src/Pages/AdminPanel/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from "./style.module.css"
+import { Link } from 'react-router-dom';
+import Button from '../../Components/button';
+ const AdminPanel = () => {
+  return (
+    <nav className={styles.nav}>
+       <Link to="/AdminLogin/AdminPanel/ProductPanel">کالاها</Link>
+       <Link to="/AdminLogin/AdminPanel/InventoryPrice">موجودی و قیمت </  Link>
+       <Link to="/AdminLogin/AdminPanel/OrdersPanel">سفارش ها</Link>
+       <Link to="/">بازگشت</Link>
+       <h2>پنل مدیریت فروشگاه</h2>
+    </nav>
+  )
+}
+
+export default AdminPanel;

src/Pages/AdminPanel/style.module.css

@@ -0,0 +1,6 @@
+.nav{
+    display: flex;
+    gap: 2rem;
+    direction: rtl;
+    justify-content: center;
+}

src/Pages/Airpod/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+ const AirPod = () => {
+  return (
+    <div>
+       <Link to="/AirPod/ProductCategory">airpod category</Link>
+      <h2>کالاهای گروه ایرپاد</h2>
+    </div>
+  )
+}
+export default AirPod;

src/Pages/Cart/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import Button from "../../Components/button"
+import Navbar from '../../Components/Navbar';
+
+ const Cart = () => {
+  return (
+    <div>
+      <Navbar/>
+      <Link to="/Cart/RegisterCustomer"><Button>{"نهایی کردن سبد خرید"}</Button></Link>
+      <h2>Cart</h2>
+    </div>
+  )
+}
+export default Cart;

src/Pages/FailPay/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import Navbar from '../../Components/Navbar';
+ const FailPay = () => {
+  return (
+    <div>
+      <Navbar/>
+      <h2>FailPay</h2>
+    </div>
+  )
+}
+export default FailPay;

src/Pages/Home/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from "./style.module.css"
+import Navbar from '../../Components/Navbar';
+import { Link } from 'react-router-dom';
+ const Home = () => {
+  return (
+    <>
+     <Navbar/> 
+     <div className={styles.products}>
+       <Link to="/Mobile">گوشی موبایل</Link>
+       <Link to="/Tablet">تبلت</Link>
+       <Link to="/Laptop">لپ تاپ</Link>
+       <Link to="/AirPod">ایرپاد</Link>
+     </div>
+
+       <h2>Home page</h2>
+    </>
+  )
+}
+export default Home;

src/Pages/Home/style.module.css

@@ -0,0 +1,5 @@
+.products{
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}

src/Pages/InventoryPrice/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+const InventoryPrice = () => {
+  return (
+    <div>InventoryPrice</div>
+  )
+}
+export default InventoryPrice

src/Pages/Laptop/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+const Laptop = () => {
+  return (
+    <div>
+      <Link to="/Mobile/ProductCategory">laptop category</Link>
+      <h2>کالاهای گروه لپ تاپ</h2>
+    </div>
+  )
+}
+export default Laptop;

src/Pages/Login/index.js

@@ -0,0 +1,15 @@
+// import React from 'react'
+// import Button from "../../Components/button"
+// import { Link } from 'react-router-dom'
+// import Navbar from '../../Components/Navbar'
+//  const Login = () => {
+//   return (
+//     <>
+
+//       <Link to="/Admin/Login"><Button title={"ورود"}/></Link>
+
+//     <h2>login page</h2>
+//     </>
+//   )
+// }
+// export default Login

src/Pages/Mobile/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import Navbar from '../../Components/Navbar';
+const Mobile = () => {
+  return (
+    <div>
+       <Navbar/>
+      <Link to="/Mobile/ProductCategory">mobile category</Link>
+      <h2>کالاهای گروه موبایل</h2>
+    </div>
+  )
+}
+export default Mobile;

src/Pages/MobileDetail/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import Button from '../../Components/button'
+
+const MObileDetail = () => {
+  return (
+    <div>
+        <Button>{"افزودن به سبد خرید"}</Button>
+    </div>
+  )
+}
+export  default MObileDetail

src/Pages/OrdersPanel/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+ const OrdersPanel = () => {
+  return (
+    <div>OrdersPanel</div>
+  )
+}
+export default OrdersPanel;

src/Pages/Payment/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import Button from '../../Components/button';
+
+const Payment = () => {
+  return (
+    <div>
+      <Link to="/Cart/RegisterCustomer/Payment/SuccessPay"><Button>{"پرداخت"}</Button></Link>
+      <Link to="/Cart/RegisterCustomer/Payment/FailPay"><Button>{"انصراف"}</Button></Link>
+
+    </div>
+  )
+}
+export default Payment;

src/Pages/ProductCategory/index.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+const ProductCategory = () => {
+  return (
+    <div>
+          <Link to="/Mobile/ProductCategory/ProductDetail">product 1</Link>
+    </div>
+  )
+}
+export  default ProductCategory;

src/Pages/ProductDetail/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Button from '../../Components/button'
+import { Link } from 'react-router-dom'
+import Navbar from '../../Components/Navbar'
+const ProductDetail = () => {
+  return (
+    <div>
+       <Navbar/>
+         <Link to="/Mobile/ProductCategory/ProductDetail"><Button>{"افزودن به سبد خرید"}</Button></Link>
+         <h2>کالای فلان</h2>
+    </div>
+  )
+}
+export default ProductDetail

src/Pages/ProductPanel/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+ const ProductPanel = () => {
+  return (
+    <div>ProductPanel</div>
+  )
+}
+export default ProductPanel;

src/Pages/RegisterCustomer/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import Button from '../../Components/button';
+import Navbar from '../../Components/Navbar';
+const RegisterCustomer = () => {
+  return (
+    <div>
+       <Navbar/>
+      <Link to="/Cart/RegisterCustomer/Payment"><Button >{"پرداخت"}</Button></Link>
+      <h2>نهایی کردن خرید</h2>
+    </div>
+  )
+}
+export default RegisterCustomer;

src/Pages/SuccessPay/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+ const SuccessPay = () => {
+  return (
+    <div>
+       <Link to="/AdminLogin">مدیریت</Link>
+    <h2>success pay</h2>
+    </div>
+  )
+}
+export default SuccessPay

src/Pages/Tablet/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+ const Tablet = () => {
+  return (
+    <div>
+       <Link to="/Mobile/ProductCategory">tablet category</Link>
+      <h2>کالاهای گروه تبلت</h2>
+
+    </div>
+  )
+}
+export default Tablet;