mirror of
https://github.com/yawaflua/SusMarket.git
synced 2025-12-09 20:19:31 +02:00
Coding product page
Description block & rating
This commit is contained in:
RailTH
@@ -7,6 +7,7 @@ $accent-color: #EB5E28;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
|
||||
.product-page__main-section {
|
||||
width: 100%;
|
||||
@@ -44,7 +45,7 @@ $accent-color: #EB5E28;
|
||||
font-weight: 400;
|
||||
line-height: 29px;
|
||||
letter-spacing: 0px;
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -69,13 +70,71 @@ $accent-color: #EB5E28;
|
||||
width: 192px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $main-color;
|
||||
border: 2px solid $main-color;
|
||||
border-radius: 12px;
|
||||
|
||||
.rating-div__stars-container {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background-image: url(assets/icons/rating__star-icon.svg);
|
||||
background-size: 30px auto;
|
||||
background-repeat: repeat-x;
|
||||
|
||||
.rating-div__star-radio {
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.rating-div__star-radio:checked, .rating-div__star-radio:hover {
|
||||
background-image: url(assets/icons/rating__filled-star-icon.svg);
|
||||
background-size: 30px auto;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.rating-div__star-radio:hover ~ .rating-div__star-radio {
|
||||
background-image: url(assets/icons/rating__star-icon.svg);
|
||||
background-size: 30px auto;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.rating-div__star-radio:nth-of-type(1) {
|
||||
z-index: 5;
|
||||
width: 30px;
|
||||
}
|
||||
.rating-div__star-radio:nth-of-type(2) {
|
||||
z-index: 4;
|
||||
width: 60px;
|
||||
}
|
||||
.rating-div__star-radio:nth-of-type(3) {
|
||||
z-index: 3;
|
||||
width: 90px;
|
||||
}
|
||||
.rating-div__star-radio:nth-of-type(4) {
|
||||
z-index: 2;
|
||||
width: 120px;
|
||||
}
|
||||
.rating-div__star-radio:nth-of-type(5) {
|
||||
z-index: 1;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-div__rate-value {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 29px;
|
||||
letter-spacing: 0%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.product-page__share-button {
|
||||
@@ -85,7 +144,7 @@ $accent-color: #EB5E28;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $main-color;
|
||||
border: 2px solid $main-color;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
@@ -125,4 +184,55 @@ $accent-color: #EB5E28;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-page__info-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
|
||||
.product-page__desc {
|
||||
color: $main-color;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.product-page__tags-ul {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.product-page__tag-li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-radius: 50px;
|
||||
background-color: $main-color;
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 29px;
|
||||
letter-spacing: 0%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-page__reviews-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-page__block-heading {
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
line-height: 39px;
|
||||
letter-spacing: 0%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
1
reactapp/src/assets/icons/rating__filled-star-icon.svg
Normal file
1
reactapp/src/assets/icons/rating__filled-star-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-269 294-157q-8 5-17 4.5t-16-5.5q-7-5-10.5-13t-1.5-18l49-212-164-143q-8-7-9.5-15.5t.5-16.5q2-8 9-13.5t17-6.5l217-19 84-200q4-9 12-13.5t16-4.5q8 0 16 4.5t12 13.5l84 200 217 19q10 1 17 6.5t9 13.5q2 8 .5 16.5T826-544L662-401l49 212q2 10-1.5 18T699-158q-7 5-16 5.5t-17-4.5L480-269Z" fill="#FFB800"/></svg>
|
||||
|
After Width: | Height: | Size: 402 B |
1
reactapp/src/assets/icons/rating__star-icon.svg
Normal file
1
reactapp/src/assets/icons/rating__star-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m323-245 157-94 157 95-42-178 138-120-182-16-71-168-71 167-182 16 138 120-42 178Zm157-24L294-157q-8 5-17 4.5t-16-5.5q-7-5-10.5-13t-1.5-18l49-212-164-143q-8-7-9.5-15.5t.5-16.5q2-8 9-13.5t17-6.5l217-19 84-200q4-9 12-13.5t16-4.5q8 0 16 4.5t12 13.5l84 200 217 19q10 1 17 6.5t9 13.5q2 8 .5 16.5T826-544L662-401l49 212q2 10-1.5 18T699-158q-7 5-16 5.5t-17-4.5L480-269Zm0-206Z" fill="#FFB800"/></svg>
|
||||
|
After Width: | Height: | Size: 489 B |
@@ -1,9 +1,15 @@
|
||||
import React from "react";
|
||||
import React, { useState } 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() {
|
||||
const [selectedRating, setSelectedRating] = useState(1);
|
||||
|
||||
const handleRatingChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedRating(Number(event.target.value));
|
||||
};
|
||||
|
||||
return(
|
||||
<section className="product-page">
|
||||
<section className="product-page__main-section">
|
||||
@@ -14,13 +20,60 @@ export default function ProductPage() {
|
||||
Шоколадка Mr. Beast
|
||||
</h2>
|
||||
<p className="product-page__short-desc-div">
|
||||
Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!
|
||||
Тот самый легендарный шоколад, который выпустил один из самых известных блогеров -
|
||||
<tr></tr>
|
||||
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 className="rating-div__stars-container">
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-div__star-radio"
|
||||
name="rating" value={1}
|
||||
aria-label="Плохо"
|
||||
checked={selectedRating === 1}
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-div__star-radio"
|
||||
name="rating" value={2}
|
||||
aria-label="Удовлетворительно"
|
||||
checked={selectedRating === 2}
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-div__star-radio"
|
||||
name="rating" value={3}
|
||||
aria-label="Нормально" checked={selectedRating === 3}
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-div__star-radio"
|
||||
name="rating"
|
||||
value={4}
|
||||
aria-label="Хорошо"
|
||||
checked={selectedRating === 4}
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-div__star-radio"
|
||||
name="rating"
|
||||
value={5}
|
||||
aria-label="Отлично"
|
||||
checked={selectedRating === 5}
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
</div>
|
||||
<span className="rating-div__rate-value">
|
||||
{selectedRating}
|
||||
</span>
|
||||
</div>
|
||||
<button className="product-page__share-button">
|
||||
<img src={ShareIcon as unknown as string} alt="" />
|
||||
@@ -37,6 +90,33 @@ export default function ProductPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="product-page__info-section">
|
||||
<h3 className="product-page__block-heading">
|
||||
Описание
|
||||
</h3>
|
||||
<p className="product-page__desc">
|
||||
Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!
|
||||
</p>
|
||||
<ul className="product-page__tags-ul">
|
||||
<li className="product-page__tag-li">
|
||||
Кондитерский
|
||||
</li>
|
||||
<li className="product-page__tag-li">
|
||||
Шоколад
|
||||
</li>
|
||||
<li className="product-page__tag-li">
|
||||
Mr. Beast
|
||||
</li>
|
||||
<li className="product-page__tag-li">
|
||||
Молочный шоколад
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section className="product-page__reviews-section">
|
||||
<h3 className="product-page__block-heading">
|
||||
Отзывы
|
||||
</h3>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user