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

Coding product page & other fixes

Browse Source 
Start of coding product page, creating of components for reviews and information page. And other little fixes of importing svg elements
This commit is contained in:
RailTH
2024-03-28 23:34:03 +11:00
parent 0c6f91c494
commit a769038291
9 changed files with 199 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
reactapp/src/App.tsx
View File

@@ -3,10 +3,11 @@ import PaymentPage from "./pages/PaymentPage";
import ProductPage from "./pages/ProductPage";
import ProfilePage from "./pages/ProfilePage";
import ScamPage from "./pages/ScamPage";
import InfoPage from "./pages/InfoPage";
import Header from "./components/Header";
import PopupMap from "./components/PopupMap";
import React, { useState } from "react";
import { Routes, Route } from 'react-router-dom'
import { Routes, Route } from 'react-router-dom';
interface AppPopupMapState {
isPopupMapVisible: boolean;
@@ -32,9 +33,10 @@ export default function App() {
<Routes>
<Route path="/" element={<HomePage />}/>
<Route path="profile/*" element={<ProfilePage />}/>
<Route path="Product" element={<ProductPage />}/>
<Route path="product" element={<ProductPage />}/>
<Route path="payment" element={<PaymentPage />}/>
<Route path="scam" element={<ScamPage />}/>
<Route path="info" element={<InfoPage />}/>
</Routes>
</main>
</>

128
reactapp/src/ProductStyle.scss
View File

@@ -0,0 +1,128 @@
$background-color: #252422;
$main-color: #CCC5B9;
$accent-color: #EB5E28;
.product-page {
width: 96%;
min-height: 100%;
display: flex;
flex-direction: column;
.product-page__main-section {
width: 100%;
min-height: 500px;
display: flex;
justify-content: space-between;
.product-page__img {
max-height: 500px;
border-radius: 15px;
}
.product-page__info-div {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 68%;
.product-page__text-span {
display: flex;
flex-direction: column;
width: 100%;
.product-page__heading-h2 {
color: white;
font-size: 32px;
font-weight: 600;
line-height: 39px;
letter-spacing: 0px;
}
.product-page__short-desc-div {
color: $main-color;
font-size: 24px;
font-weight: 400;
line-height: 29px;
letter-spacing: 0px;
min-height: 100px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.product-page__container-div {
width: 100%;
height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.product-page__rating-share-div {
height: 40px;
display: flex;
gap: 20px;
.product-page__rating-div {
width: 192px;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0px 10px 0px 10px;
box-sizing: border-box;
border: 1px solid $main-color;
border-radius: 12px;
}
.product-page__share-button {
width: 40px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid $main-color;
border-radius: 12px;
}
}
.product-page__price-buy-div {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
.product-page__price-span {
color: $accent-color;
font-size: 40px;
font-weight: 600;
line-height: 49px;
letter-spacing: 0px;
}
.product-page__buy-link {
width: 400px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
border-radius: 15px;
background: $accent-color;
color: white;
font-size: 32px;
font-weight: 600;
line-height: 39px;
letter-spacing: 0px;
}
}
}
}
}
}

15
reactapp/src/ProfileStyle.scss
View File

@@ -20,8 +20,7 @@ $accent-color: #EB5E28;
font-size: 32px;
font-weight: 600;
line-height: 39px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
}
.active {
@@ -39,8 +38,7 @@ $accent-color: #EB5E28;
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
}
}
@@ -96,8 +94,7 @@ $accent-color: #EB5E28;
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
}
.order-article__info-span {
@@ -105,8 +102,7 @@ $accent-color: #EB5E28;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
}
.order-article__date-span {
@@ -114,8 +110,7 @@ $accent-color: #EB5E28;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
}
}
}

10
reactapp/src/assets/icons/share-icon.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_51_259)">
<path d="M12.8785 15.9167C12.2518 15.9167 11.7191 15.6967 11.2804 15.2567C10.8416 14.8167 10.6223 14.2825 10.6223 13.6539C10.6223 13.5659 10.6322 13.4583 10.652 13.3311C10.6718 13.2038 10.7014 13.0893 10.741 12.9875L4.74416 9.50421C4.54624 9.72851 4.30214 9.90994 4.01186 10.0485C3.72159 10.187 3.42471 10.2563 3.12124 10.2563C2.4945 10.2563 1.96178 10.0369 1.52306 9.59822C1.08435 9.1595 0.86499 8.62678 0.86499 8.00004C0.86499 7.3733 1.08435 6.84058 1.52306 6.40186C1.96178 5.96315 2.4945 5.74379 3.12124 5.74379C3.42471 5.74379 3.71499 5.80317 3.99207 5.92192C4.26916 6.04067 4.51985 6.21219 4.74416 6.4365L10.741 2.99275C10.7014 2.89945 10.6718 2.79448 10.652 2.67784C10.6322 2.56122 10.6223 2.44848 10.6223 2.33962C10.6223 1.71289 10.8416 1.18016 11.2804 0.741447C11.7191 0.302732 12.2518 0.083374 12.8785 0.083374C13.5053 0.083374 14.038 0.302732 14.4767 0.741447C14.9154 1.18016 15.1348 1.71289 15.1348 2.33962C15.1348 2.96636 14.9154 3.49909 14.4767 3.9378C14.038 4.37652 13.5053 4.59587 12.8785 4.59587C12.5704 4.59587 12.2756 4.54639 11.9943 4.44744C11.713 4.34848 11.4733 4.18685 11.2754 3.96254L5.27853 7.28754C5.30492 7.3931 5.32801 7.51514 5.3478 7.65369C5.36759 7.79223 5.37749 7.90927 5.37749 8.00481C5.37749 8.10036 5.36759 8.19932 5.3478 8.30169C5.32801 8.40406 5.30492 8.50803 5.27853 8.61358L11.2754 12.0177C11.4733 11.833 11.7042 11.6846 11.9681 11.5724C12.232 11.4603 12.5355 11.4042 12.8785 11.4042C13.5053 11.4042 14.038 11.6236 14.4767 12.0623C14.9154 12.501 15.1348 13.0337 15.1348 13.6605C15.1348 14.2872 14.9154 14.8199 14.4767 15.2586C14.038 15.6973 13.5053 15.9167 12.8785 15.9167ZM12.8792 3.40837C13.1822 3.40837 13.436 3.30589 13.6405 3.10091C13.845 2.89594 13.9473 2.64194 13.9473 2.33893C13.9473 2.03592 13.8448 1.78216 13.6398 1.57764C13.4348 1.37313 13.1808 1.27087 12.8778 1.27087C12.5748 1.27087 12.3211 1.37336 12.1166 1.57834C11.912 1.78331 11.8098 2.03731 11.8098 2.34032C11.8098 2.64333 11.9123 2.89709 12.1172 3.1016C12.3222 3.30612 12.5762 3.40837 12.8792 3.40837ZM3.12193 9.06879C3.42494 9.06879 3.67871 8.9663 3.88322 8.76133C4.08773 8.55635 4.18999 8.30236 4.18999 7.99935C4.18999 7.69634 4.0875 7.44258 3.88253 7.23806C3.67755 7.03355 3.42356 6.93129 3.12055 6.93129C2.81754 6.93129 2.56377 7.03378 2.35926 7.23875C2.15475 7.44373 2.05249 7.69772 2.05249 8.00073C2.05249 8.30374 2.15498 8.55751 2.35995 8.76202C2.56493 8.96653 2.81892 9.06879 3.12193 9.06879ZM12.8792 14.7292C13.1822 14.7292 13.436 14.6267 13.6405 14.4217C13.845 14.2168 13.9473 13.9628 13.9473 13.6598C13.9473 13.3568 13.8448 13.103 13.6398 12.8985C13.4348 12.694 13.1808 12.5917 12.8778 12.5917C12.5748 12.5917 12.3211 12.6942 12.1166 12.8992C11.912 13.1041 11.8098 13.3581 11.8098 13.6612C11.8098 13.9642 11.9123 14.2179 12.1172 14.4224C12.3222 14.627 12.5762 14.7292 12.8792 14.7292Z" fill="#CCC5B9"/>
</g>
<defs>
<clipPath id="clip0_51_259">
<rect width="14.2698" height="15.8333" fill="white" transform="translate(0.86499 0.083374)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

0
reactapp/src/components/Review.tsx Normal file
View File

25
reactapp/src/index.scss
View File

@@ -31,7 +31,6 @@ body {
font-weight: 600;
line-height: 39px;
height: 50px;
text-align: left;
display: inline-block;
span {
@@ -50,8 +49,7 @@ body {
font-size: 16px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -95,8 +93,7 @@ body {
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
.title-h1__a {
color: white;
@@ -121,8 +118,7 @@ body {
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
}
.search-form {
@@ -147,8 +143,7 @@ body {
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
}
.search-form__input::-webkit-input-placeholder {
@@ -183,8 +178,7 @@ body {
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
padding: 30px 14px;
border-radius: 10px;
box-sizing: border-box;
@@ -248,8 +242,7 @@ body {
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
border-radius: 8px;
box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.25),4px 4px 10px 0px rgba(0, 0, 0, 0.25);
}
@@ -273,8 +266,7 @@ body {
font-size: 20px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
color: white;
}
}
@@ -292,8 +284,7 @@ body {
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
letter-spacing: 0px;
transition: 0.2s;
}

7
reactapp/src/pages/InfoPage.tsx Normal file
View File

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

38
reactapp/src/pages/ProductPage.tsx
View File

@@ -1,8 +1,42 @@
import React from "react";
import '../ProductStyle.scss';
import ProductImage from "../assets/img/product-image-1.webp";
import ShareIcon from "../assets/icons/share-icon.svg";
export default function ProductPage() {
return(
<>
</>
<section className="product-page">
<section className="product-page__main-section">
<img src={ProductImage} className="product-page__img" alt="изображение товара"/>
<div className="product-page__info-div">
<span className="product-page__text-span">
<h2 className="product-page__heading-h2">
Шоколадка Mr. Beast
</h2>
<p className="product-page__short-desc-div">
Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!
</p>
</span>
<div className="product-page__container-div">
<div className="product-page__rating-share-div">
<div className="product-page__rating-div">
</div>
<button className="product-page__share-button">
<img src={ShareIcon as unknown as string} alt="" />
</button>
</div>
<div className="product-page__price-buy-div">
<span className="product-page__price-span">
150 ₽
</span>
<a href="/" className="product-page__buy-link">
Купить
</a>
</div>
</div>
</div>
</section>
</section>
)
}

2
reactapp/tsconfig.json
View File

@@ -22,4 +22,4 @@
"src/components",
"src/utils/custom.d.ts"
]
}
}