mirror of
https://github.com/yawaflua/SusMarket.git
synced 2026-02-04 19:04:12 +02:00
Coding product page &review
Coding styles (gaps) & coding reviews component
This commit is contained in:
RailTH
@@ -33,7 +33,7 @@ export default function App() {
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<HomePage />}/>
|
<Route path="/" element={<HomePage />}/>
|
||||||
<Route path="profile/*" element={<ProfilePage />}/>
|
<Route path="profile/*" element={<ProfilePage />}/>
|
||||||
<Route path="product" element={<ProductPage />}/>
|
<Route path="product" element={<ProductPage value={4.4}/>}/>
|
||||||
<Route path="payment" element={<PaymentPage />}/>
|
<Route path="payment" element={<PaymentPage />}/>
|
||||||
<Route path="scam" element={<ScamPage />}/>
|
<Route path="scam" element={<ScamPage />}/>
|
||||||
<Route path="info" element={<InfoPage />}/>
|
<Route path="info" element={<InfoPage />}/>
|
||||||
|
|||||||
@@ -225,6 +225,111 @@ $accent-color: #EB5E28;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
.reviews-section__rate-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 48px;
|
||||||
|
width: 310px;
|
||||||
|
.rate-block__rating {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
.rate-block__rate-number {
|
||||||
|
color: white;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 44px;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rate-block__star-rating {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
color: #ccc;
|
||||||
|
position: relative;
|
||||||
|
unicode-bidi: bidi-override;
|
||||||
|
direction: rtl;
|
||||||
|
font-size: 36px;
|
||||||
|
|
||||||
|
.star-rating__back-stars {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
height: 100%px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-rating__front-stars {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
color: #FFB800;
|
||||||
|
|
||||||
|
span {
|
||||||
|
height: 100%px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rate-block__progressbars-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.progressbars-group__progressbar-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.rate-progressbar__rate-number {
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressbar-container__progressbar {
|
||||||
|
height: 12px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: $main-color;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.progressbar__active-line {
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFB800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-page__reviews-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 50px;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-page__block-heading {
|
.product-page__block-heading {
|
||||||
|
|||||||
BIN
reactapp/src/assets/img/review__product-image.webp
Normal file
BIN
reactapp/src/assets/img/review__product-image.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
reactapp/src/assets/img/review__user-avatar-test.png
Normal file
BIN
reactapp/src/assets/img/review__user-avatar-test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
@@ -0,0 +1,31 @@
|
|||||||
|
import React from "react";
|
||||||
|
import "../index.scss";
|
||||||
|
import UserAvatar from "../assets/img/review__user-avatar-test.png";
|
||||||
|
import ProductImage from "../assets/img/review__product-image.webp";
|
||||||
|
|
||||||
|
export default function Review() {
|
||||||
|
return(
|
||||||
|
<article className="review-article">
|
||||||
|
<div className="review-article__review-container">
|
||||||
|
<div className="review-container__user-info">
|
||||||
|
<img className="user-info__user-avatar" src={UserAvatar} alt="Review user avatar" />
|
||||||
|
<h4 className="user-info__user-name">
|
||||||
|
Святослав Васильев
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div className="review-container__review-info">=
|
||||||
|
<div className="review-info__star-rate">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<time className="review-info__review-date" dateTime="2019-09-09">
|
||||||
|
09.09.2019
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="review-article__text-p">
|
||||||
|
dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia
|
||||||
|
</p>
|
||||||
|
<img className="review-article__product-image" src={ProductImage} alt="Review product image" />
|
||||||
|
</article>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -312,3 +312,71 @@ body {
|
|||||||
left:50%;
|
left:50%;
|
||||||
transform:translate(-50%, -50%);
|
transform:translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.review-article {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
.review-article__review-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
|
||||||
|
.review-container__user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 30px;
|
||||||
|
|
||||||
|
.user-info__user-avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info__user-name {
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 29px;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-container__review-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.review-info__star-rate {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-info__review-date {
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 29px;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-article__text-p {
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 29px;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-article__product-image {
|
||||||
|
max-width: 300px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,9 +1,14 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import Review from '../components/Review';
|
||||||
import '../ProductStyle.scss';
|
import '../ProductStyle.scss';
|
||||||
import ProductImage from "../assets/img/product-image-1.webp";
|
import ProductImage from "../assets/img/product-image-1.webp";
|
||||||
import ShareIcon from "../assets/icons/share-icon.svg";
|
import ShareIcon from "../assets/icons/share-icon.svg";
|
||||||
|
|
||||||
export default function ProductPage() {
|
interface StarRatingProps {
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProductPage({ value }: StarRatingProps) {
|
||||||
const [selectedRating, setSelectedRating] = useState(1);
|
const [selectedRating, setSelectedRating] = useState(1);
|
||||||
|
|
||||||
const handleRatingChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
const handleRatingChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
@@ -116,6 +121,74 @@ export default function ProductPage() {
|
|||||||
<h3 className="product-page__block-heading">
|
<h3 className="product-page__block-heading">
|
||||||
Отзывы
|
Отзывы
|
||||||
</h3>
|
</h3>
|
||||||
|
<div className='reviews-section__rate-block'>
|
||||||
|
<div className='rate-block__rating'>
|
||||||
|
<span className='rate-block__rate-number'>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
<div className="rate-block__star-rating">
|
||||||
|
<div className="star-rating__back-stars">
|
||||||
|
{'★★★★★'.split('').map((star, i) => (
|
||||||
|
<span key={`back-star-${i}`}>{star}</span>
|
||||||
|
))}
|
||||||
|
<div className="star-rating__front-stars" style={{ width: `${(value / 5) * 100}%` }}>
|
||||||
|
{'★★★★★'.split('').map((star, i) => (
|
||||||
|
<span key={`front-star-${i}`}>{star}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='rate-block__progressbars-group'>
|
||||||
|
<div className='progressbars-group__progressbar-container'>
|
||||||
|
<span className='rate-progressbar__rate-number'>
|
||||||
|
5
|
||||||
|
</span>
|
||||||
|
<div className='progressbar-container__progressbar'>
|
||||||
|
<div className='progressbar__active-line'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='progressbars-group__progressbar-container'>
|
||||||
|
<span className='rate-progressbar__rate-number'>
|
||||||
|
4
|
||||||
|
</span>
|
||||||
|
<div className='progressbar-container__progressbar'>
|
||||||
|
<div className='progressbar__active-line'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='progressbars-group__progressbar-container'>
|
||||||
|
<span className='rate-progressbar__rate-number'>
|
||||||
|
3
|
||||||
|
</span>
|
||||||
|
<div className='progressbar-container__progressbar'>
|
||||||
|
<div className='progressbar__active-line'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='progressbars-group__progressbar-container'>
|
||||||
|
<span className='rate-progressbar__rate-number'>
|
||||||
|
2
|
||||||
|
</span>
|
||||||
|
<div className='progressbar-container__progressbar'>
|
||||||
|
<div className='progressbar__active-line'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='progressbars-group__progressbar-container'>
|
||||||
|
<span className='rate-progressbar__rate-number'>
|
||||||
|
1
|
||||||
|
</span>
|
||||||
|
<div className='progressbar-container__progressbar'>
|
||||||
|
<div className='progressbar__active-line'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='product-page__reviews-container'>
|
||||||
|
<Review />
|
||||||
|
<Review />
|
||||||
|
<Review />
|
||||||
|
<Review />
|
||||||
|
<Review />
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user