mirror of
https://github.com/yawaflua/SusMarket.git
synced 2025-12-09 20:19:31 +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>
|
||||
<Route path="/" element={<HomePage />}/>
|
||||
<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="scam" element={<ScamPage />}/>
|
||||
<Route path="info" element={<InfoPage />}/>
|
||||
|
||||
@@ -225,6 +225,111 @@ $accent-color: #EB5E28;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
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 {
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -311,4 +311,72 @@ body {
|
||||
top:50%;
|
||||
left: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 Review from '../components/Review';
|
||||
import '../ProductStyle.scss';
|
||||
import ProductImage from "../assets/img/product-image-1.webp";
|
||||
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 handleRatingChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -116,6 +121,74 @@ export default function ProductPage() {
|
||||
<h3 className="product-page__block-heading">
|
||||
Отзывы
|
||||
</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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user