yawaflua/SusMarket
1
0
Fork 0
mirror of https://github.com/yawaflua/SusMarket.git synced 2026-04-25 17:20:43 +03: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
reactapp/src/components/ProductCard.tsx
+9 -2
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>
)
}
reactapp/src/components/ProfileInfo.tsx
+12
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>
)
}
reactapp/src/components/ProfileOrders.tsx
+34 -2
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>
)
}
reactapp/src/components/ProfilePurchases.tsx
+23 -2
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>
)
}