yawaflua/SusMarket
1
0
Fork 0
mirror of https://github.com/yawaflua/SusMarket.git synced 2025-12-09 20:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Profile page, file structure & fixes

Browse Source 
Fixed warning about Babel, added folder 'utils', coding profile page & other
This commit is contained in:
RailTH
2024-02-08 16:37:07 +11:00
parent 7d1cc35a0c
commit 8292a2622d
16 changed files with 261 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
reactapp/package-lock.json generated
View File

@@ -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",
"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==",
"version": "7.21.11",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
"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",

3
reactapp/package.json
View File

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

8
reactapp/src/App.tsx
View File

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

132
reactapp/src/ProfileStyle.scss
View File

@@ -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;
}
}
}
}

BIN
reactapp/src/assets/img/profile-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

11
reactapp/src/components/ProductCard.tsx
View File

@@ -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>
<h6 className="product-article__name-h6">{ProductName}</h6>
<h5 className="product-article__price-h5">
<span>{PriceAsString}</span>
<span>₽</span>
</h5>
<h6 className="product-article__name-h6">
{ProductName}
</h6>
</article>
)
}

12
reactapp/src/components/ProfileInfo.tsx Normal file
View File

@@ -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>
)
}

36
reactapp/src/components/ProfileOrders.tsx
View File

@@ -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>
)
}

25
reactapp/src/components/ProfilePurchases.tsx
View File

@@ -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>
)
}

14
reactapp/src/index.scss
View File

@@ -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 {

2
reactapp/src/index.tsx
View File

@@ -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);

2
reactapp/src/pages/HomePage.tsx
View File

@@ -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} />

8
reactapp/src/pages/ProfilePage.tsx
View File

@@ -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="/profile/orders" element={<ProfilePurchases />} />
<Route path="/" element={<ProfileOrders/>}/>
<Route path="purchases" element={<ProfilePurchases/>}/>
</Routes>
</section>
)

0
reactapp/src/custom.d.ts → reactapp/src/utils/custom.d.ts vendored
View File

0
reactapp/src/reset.css → reactapp/src/utils/reset.css
View File

2
reactapp/tsconfig.json
View File

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