Routing, Profile page and changes in file structure

Started coding of profile page, made routing with react-router, added logo in title and changed structure of files

reactapp/package-lock.json

@@ -19,6 +19,7 @@
         "node-sass": "^9.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
         "scss": "^0.2.4",
         "typescript": "^5.3.3",
@@ -3416,6 +3417,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz",
+      "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -16160,6 +16169,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",
+      "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==",
+      "dependencies": {
+        "@remix-run/router": "1.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz",
+      "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==",
+      "dependencies": {
+        "@remix-run/router": "1.15.0",
+        "react-router": "6.22.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

reactapp/package.json

@@ -14,6 +14,7 @@
     "node-sass": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "scss": "^0.2.4",
     "typescript": "^5.3.3",

reactapp/src/App.tsx

@@ -1,14 +1,25 @@
-import HomePage from "./components/pages/HomePage";
+import HomePage from "./pages/HomePage";
-import Header from "./components/blocks/Header";
+import PaymentPage from "./pages/PaymentPage";
+import ProductPage from "./pages/ProductPage";
+import ProfilePage from "./pages/ProfilePage";
+import ScamPage from "./pages/ScamPage";
+import Header from "./components/Header";
 import SearchIcon from "../src/assets/icons/search-form__icon.svg";
 import React from "react";
+import { Routes, Route } from 'react-router-dom'
 
 export default function App() {
   return (
     <>
       <Header SearchIcon={SearchIcon}/>
       <main className="main">
-        <HomePage/>
+        <Routes>
+          <Route path="/" element={<HomePage />}/>
+          <Route path="/profile" element={<ProfilePage />}/>
+          <Route path="/Product" element={<ProductPage />}/>
+          <Route path="/payment" element={<PaymentPage />}/>
+          <Route path="/scam" element={<ScamPage />}/>
+        </Routes>
       </main>
     </>
   );

reactapp/src/ProfileStyle.scss

@@ -0,0 +1,11 @@
+$background-color: #252422;
+$main-color: #CCC5B9;
+$accent-color: #EB5E28;
+
+.profile-section {
+    width: 96%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

reactapp/src/components/Header.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+import Logotype from "../assets/img/amongasik.png";
 
 export default function Header(SearchIcon:any) {
     return(
         <header className="header">
-            <h1 className="header__title">SuSMarket</h1>
+            <h1 className="header__title-h1">
+                <Link to="/" className="title-h1__a">
+                    <img className="header__logo-img" src={Logotype} alt="Dead amongus" />
+                    <span>SuSMarket</span>
+                </Link>
+            </h1>
             <motion.button 
                 className="catalog-button"
                 whileTap={{scale: 0.95}}
@@ -31,14 +38,15 @@ export default function Header(SearchIcon:any) {
                     {/* Код для svg */}
                 </div>
             </form>
-            <motion.a 
+            <Link 
-                href="/" 
+                to="/profile" 
                 className="header__profile-a"
+            >
+                {/* Код для svg */}
+                <motion.svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none"
                     whileTap={{scale: 0.9}}
                     transition={{duration: 0.2, type: "spring"}}
                 >
-                {/* Код для svg */}
-                <svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none">
                     <desc>
                             Created with Pixso.
                     </desc>
@@ -51,9 +59,9 @@ export default function Header(SearchIcon:any) {
                     <g clipPath="url(#clip3_40)">
                         <path id="Vector" d="M24 23.95C21.8 23.95 20 23.25 18.6 21.85C17.2 20.45 16.5 18.6499 16.5 16.45C16.5 14.25 17.2 12.45 18.6 11.0499C20 9.6499 21.8 8.94995 24 8.94995C26.2 8.94995 28 9.6499 29.4 11.0499C30.8 12.45 31.5 14.25 31.5 16.45C31.5 18.6499 30.8 20.45 29.4 21.85C28 23.25 26.2 23.95 24 23.95ZM8 37L8 35.2999C8 34.0333 8.31665 32.95 8.94995 32.0499C9.58337 31.1499 10.4 30.4667 11.4 30C13.6333 29 15.775 28.25 17.825 27.75C19.875 27.25 21.9333 27 24 27C26.0667 27 28.1167 27.2583 30.15 27.7749C32.1833 28.2916 34.3153 29.0365 36.546 30.0096C37.5894 30.4805 38.4259 31.1633 39.0555 32.058C39.6852 32.9526 40 34.0333 40 35.2999L40 37C40 37.825 39.7063 38.5312 39.1188 39.1187C38.5312 39.7062 37.825 40 37 40L11 40C10.175 40 9.46875 39.7062 8.88123 39.1187C8.2937 38.5312 8 37.825 8 37ZM11 37L37 37L37 35.2999C37 34.7666 36.8417 34.2583 36.525 33.7749C36.2084 33.2916 35.8167 32.9332 35.35 32.7C33.2167 31.6666 31.2667 30.9583 29.5 30.575C27.7333 30.1917 25.9 30 24 30C22.1 30 20.25 30.1917 18.45 30.575C16.65 30.9583 14.7 31.6666 12.6 32.7C12.1333 32.9332 11.75 33.2916 11.45 33.7749C11.15 34.2583 11 34.7666 11 35.2999L11 37ZM24 20.95C25.3 20.95 26.375 20.5249 27.225 19.6749C28.075 18.825 28.5 17.75 28.5 16.45C28.5 15.1499 28.075 14.075 27.225 13.225C26.375 12.375 25.3 11.95 24 11.95C22.7 11.95 21.625 12.375 20.775 13.225C19.925 14.075 19.5 15.1499 19.5 16.45C19.5 17.75 19.925 18.825 20.775 19.6749C21.625 20.5249 22.7 20.95 24 20.95Z" fill="#CCC5B9" fillOpacity="1.000000" fillRule="nonzero"/>
                     </g>
-                </svg>
+                </motion.svg>
                 {/* Код для svg */}
-            </motion.a>
+            </Link>
             <motion.button
                 className="header__popupmap-button"
                 whileTap={{scale: 0.9}}

reactapp/src/components/ProfileOrders.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function ProfilePage() {
+export default function ProfileOrders() {
     return(
         <>
         </>

reactapp/src/components/ProfilePurchases.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export default function ProfilePurchases() {
+    return(
+        <>
+        </>
+    )
+}

reactapp/src/index.scss

@@ -76,13 +76,20 @@ body {
     padding: 0px 40px 0px 40px;
     background-color: $background-color;
 
-    .header__title {
+    .header__title-h1 {
-        color: white;
         font-size: 24px;
         font-weight: 600;
         line-height: 29px;
         letter-spacing: 0%;
         text-align: left;
+
+        .title-h1__a {
+            color: white;
+            
+            .header__logo-img {
+                width: 30px;
+            }
+        }
     }
 
     .catalog-button {

reactapp/src/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import './index.scss';
-import './HomeStyle.scss';
 import './reset.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
+    <BrowserRouter>
       <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

reactapp/src/pages/HomePage.tsx

@@ -1,16 +1,17 @@
 import React from "react";
-import ProductCard from "../blocks/ProductCard";
+import '../HomeStyle.scss'
-import Banner from "../blocks/AddBanner";
+import ProductCard from "../components/ProductCard";
-import Image1 from "../../assets/img/product-image-1.webp";
+import Banner from "../components/AddBanner";
-import Image2 from "../../assets/img/product-image-2.webp";
+import Image1 from "../assets/img/product-image-1.webp";
-import Image3 from "../../assets/img/product-image-3.webp";
+import Image2 from "../assets/img/product-image-2.webp";
-import Image4 from "../../assets/img/product-image-4.webp";
+import Image3 from "../assets/img/product-image-3.webp";
-import Image5 from "../../assets/img/product-image-5.webp";
+import Image4 from "../assets/img/product-image-4.webp";
-import Image6 from "../../assets/img/product-image-6.webp";
+import Image5 from "../assets/img/product-image-5.webp";
-import Image7 from "../../assets/img/product-image-7.webp";
+import Image6 from "../assets/img/product-image-6.webp";
-import Image8 from "../../assets/img/product-image-8.webp";
+import Image7 from "../assets/img/product-image-7.webp";
-import Image9 from "../../assets/img/product-image-9.webp";
+import Image8 from "../assets/img/product-image-8.webp";
-import Image10 from "../../assets/img/product-image-10.webp";
+import Image9 from "../assets/img/product-image-9.webp";
+import Image10 from "../assets/img/product-image-10.webp";
 
 export default function HomePage() {
     return(

reactapp/src/pages/ProfilePage.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Banner from "../components/AddBanner";
+import ProfileOrders from "../components/ProfileOrders";
+import ProfilePurchases from "../components/ProfilePurchases";
+import '../ProfileStyle.scss';
+import { Routes, Route, Link } from 'react-router-dom';
+
+export default function ProfilePage() {
+    return(
+        <section className="profile-section">
+            <Banner />
+            <Routes>
+                <Route path="/profile/orders" element={<ProfileOrders />} />
+                <Route path="/profile/orders" element={<ProfilePurchases />} />
+            </Routes>
+        </section>
+    )
+}