Coding product page

Description block & rating

reactapp/src/ProductStyle.scss

@@ -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: space-between;
-                        justify-content: flex-start;
                         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;
+    }
 }

reactapp/src/assets/icons/rating__filled-star-icon.svg

@@ -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>

reactapp/src/assets/icons/rating__star-icon.svg

@@ -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>

reactapp/src/pages/ProductPage.tsx

@@ -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>
     )
 }