Profile page, file structure & fixes

Fixed warning about Babel, added folder 'utils', coding profile page & other

reactapp/package-lock.json

@@ -24,6 +24,9 @@
         "scss": "^0.2.4",
         "typescript": "^5.3.3",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -652,9 +655,17 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
+      "version": "7.21.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1897,6 +1908,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",

reactapp/package.json

@@ -43,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

reactapp/src/App.tsx

@@ -15,10 +15,10 @@ export default function App() {
       <main className="main">
         <Routes>
           <Route path="/" element={<HomePage />}/>
-          <Route path="/profile" element={<ProfilePage />}/>
+          <Route path="profile/*" element={<ProfilePage />}/>
-          <Route path="/Product" element={<ProductPage />}/>
+          <Route path="Product" element={<ProductPage />}/>
-          <Route path="/payment" element={<PaymentPage />}/>
+          <Route path="payment" element={<PaymentPage />}/>
-          <Route path="/scam" element={<ScamPage />}/>
+          <Route path="scam" element={<ScamPage />}/>
         </Routes>
       </main>
     </>

reactapp/src/ProfileStyle.scss

@@ -8,4 +8,136 @@ $accent-color: #EB5E28;
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 20px;
+
+    .profile-section__nav {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .profile-link {
+            color: white;
+            font-size: 32px;
+            font-weight: 600;
+            line-height: 39px;
+            letter-spacing: 0%;
+            text-align: left;
+        }
+
+        .active {
+            color: $accent-color;
+        }
+    }
+
+    .profile-section__info-div {
+        display: flex;
+        max-width: 150px;
+        flex-direction: column;
+
+        span {
+            color: white;
+            font-size: 24px;
+            font-weight: 600;
+            line-height: 29px;
+            letter-spacing: 0%;
+            text-align: left;
+        }
+    }
+
+    .orders-section {
+        width: 100%;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        
+        .orders-container {
+            width: 100%;
+            display: flex;
+            gap: 80px;
+
+            .orders-div {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: flex-start;
+                gap: 40px;
+                
+                .order-article {
+                    width: 352px;
+                    height: 120px;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 0px 14px 0px 14px;
+                    border-radius: 15px;
+                    box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.25),4px 4px 10px 0px rgba(0, 0, 0, 0.25);
+                    background: $background-color;
+
+                    .order-article__img {
+                        min-width: 90px;
+                        background-position: center;
+                        background-size: cover;
+                        background-repeat: no-repeat;
+                        height: 90px;
+                        border-radius: 8px;
+                        background-image: url(../src/assets/img/product-image-1.webp);
+                    }
+
+                    .order-article__info-div {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: flex-start;
+
+                        .order-article__status-span {
+                            color: white;
+                            font-size: 24px;
+                            font-weight: 600;
+                            line-height: 29px;
+                            letter-spacing: 0%;
+                            text-align: left;
+                        }
+
+                        .order-article__info-span {
+                            color: #808080;
+                            font-size: 16px;
+                            font-weight: 500;
+                            line-height: 20px;
+                            letter-spacing: 0%;
+                            text-align: left;
+                        }
+
+                        .order-article__date-span {
+                            color: white;
+                            font-size: 16px;
+                            font-weight: 500;
+                            line-height: 20px;
+                            letter-spacing: 0%;
+                            text-align: left;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .purchases-section {
+        width: 100%;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        .purchases-container {
+            width: 100%;
+            display: flex;
+            gap: 80px;
+
+            .purchases-div {
+                display: flex;
+            }
+        }
+    }
 }

reactapp/src/components/ProductCard.tsx

@@ -7,11 +7,18 @@ type ProductTypes = {
 }
 
 export default function ProductCard({ProductName, ProductImg, Price}:ProductTypes) {
+    const PriceAsString = Price.toString();
+    
     return(
         <article className="product-article">
             <img src={ProductImg} alt="" className="product-article__img"/>
-            <h5 className="product-article__price-h5">{Price} ₽</h5>
+            <h5 className="product-article__price-h5">
-            <h6 className="product-article__name-h6">{ProductName}</h6>
+                <span>{PriceAsString}</span>
+                <span>₽</span>
+            </h5>
+            <h6 className="product-article__name-h6">
+                {ProductName}
+            </h6>
         </article>
     )
 }

reactapp/src/components/ProfileInfo.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ProfileAvatar from '../assets/img/profile-avatar.png';
+import '../ProfileStyle.scss';
+
+export default function ProfileInfo() {
+    return(
+        <div className="profile-section__info-div">
+            <img src={ProfileAvatar} alt="" className="info-div__img"/>
+            <span>Роман Константинов</span>
+        </div>
+    )
+}

reactapp/src/components/ProfileOrders.tsx

@@ -1,8 +1,40 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import '../ProfileStyle.scss';
+import ProfileInfo from "./ProfileInfo";
 
 export default function ProfileOrders() {
     return(
-        <>
+        <section className="orders-section">
-        </>
+            <nav className="profile-section__nav">
+                <Link to="/" className="profile-link active">
+                    Мои заказы
+                </Link>
+                <Link to="purchases" className="profile-link">
+                    Мои покупки
+                </Link>
+            </nav>
+            <div className="orders-container">
+                <ProfileInfo />
+                <div className="orders-div">
+                    <article className="order-article">
+                        <div className="order-article__img"></div>
+                        <div className="order-article__info-div">
+                            <span className="order-article__status-span">В пути</span>
+                            <span className="order-article__info-span">Доставка в пункт выдачи</span>
+                            <span className="order-article__date-span">Ожидаем 9 декабря</span>
+                        </div>
+                    </article>
+                    <article className="order-article">
+                        <div className="order-article__img"></div>
+                        <div className="order-article__info-div">
+                            <span className="order-article__status-span">В пути</span>
+                            <span className="order-article__info-span">Доставка в пункт выдачи</span>
+                            <span className="order-article__date-span">Ожидаем 9 декабря</span>
+                        </div>
+                    </article>
+                </div>
+            </div>
+        </section>
     )
 }

reactapp/src/components/ProfilePurchases.tsx

@@ -1,8 +1,29 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import '../ProfileStyle.scss';
+import ProfileInfo from "./ProfileInfo";
+import ProductCard from "./ProductCard";
+import ProductImage from "../assets/img/product-image-3.webp";
 
 export default function ProfilePurchases() {
     return(
-        <>
+        <section className="purchases-section">
-        </>
+            <nav className="profile-section__nav">
+                <Link to="/profile" className="profile-link">
+                    Мои заказы
+                </Link>
+                <Link to="purchases" className="profile-link active">
+                    Мои покупки
+                </Link>
+            </nav>
+            <div className="purchases-container">
+                <ProfileInfo />
+                <div className="purchases-div">
+                    <ProductCard ProductImg={ProductImage} ProductName="Абеме" Price={150}/>
+                    <ProductCard ProductImg={ProductImage} ProductName="Абеме" Price={1234523453}/>
+                    <ProductCard ProductImg={ProductImage} ProductName="Абеме" Price={10}/>
+                </div>
+            </div>
+        </section>
     )
 }

reactapp/src/index.scss

@@ -1,7 +1,7 @@
 $background-color: #252422;
 $main-color: #CCC5B9;
 $accent-color: #EB5E28;
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
 
 body {
     background-color: $background-color;
@@ -30,8 +30,18 @@ body {
         font-size: 32px;
         font-weight: 600;
         line-height: 39px;
-        letter-spacing: 0%;
+        height: 50px;
         text-align: left;
+        display: inline-block;
+
+        span {
+            max-width: 186px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+        }
+        
     }
 
     .product-article__name-h6 {

reactapp/src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import './index.scss';
-import './reset.css';
+import './utils/reset.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

reactapp/src/pages/HomePage.tsx

@@ -24,7 +24,7 @@ export default function HomePage() {
                 <ProductCard ProductName="Мороженое" ProductImg={Image4} Price={150} />
                 <ProductCard ProductName="Фигурка" ProductImg={Image5} Price={1799} />
                 <ProductCard ProductName="Трансформер" ProductImg={Image6} Price={19999} />
-                <ProductCard ProductName="Старая игрушка Баз-Лайтер" ProductImg={Image7} Price={99999999999} />
+                <ProductCard ProductName="Старая игрушка Баз-Лайтер" ProductImg={Image7} Price={2564235634563456} />
                 <ProductCard ProductName="Одёжка" ProductImg={Image8} Price={756} />
                 <ProductCard ProductName="Книга про ботанику" ProductImg={Image9} Price={2345} />
                 <ProductCard ProductName="Книга белая" ProductImg={Image10} Price={150} />

reactapp/src/pages/ProfilePage.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 import Banner from "../components/AddBanner";
+import '../ProfileStyle.scss';
+import { Route, Routes } from "react-router-dom";
 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="/" element={<ProfileOrders/>}/>
-                <Route path="/profile/orders" element={<ProfilePurchases />} />
+                <Route path="purchases" element={<ProfilePurchases/>}/>
             </Routes>
         </section>
     )

reactapp/tsconfig.json

@@ -20,6 +20,6 @@
   "include": [
     "src",
     "src/components",
-    "src/custom.d.ts"
+    "src/utils/custom.d.ts"
   ]
 }