From 4d74ec9c21d1cbde98b1b19e99ed407b3e14239e Mon Sep 17 00:00:00 2001 From: RailTH Date: Fri, 29 Mar 2024 19:50:25 +1100 Subject: [PATCH] Coding product page Description block & rating --- reactapp/src/ProductStyle.scss | 120 +++++++++++++++++- .../assets/icons/rating__filled-star-icon.svg | 1 + .../src/assets/icons/rating__star-icon.svg | 1 + reactapp/src/pages/ProductPage.tsx | 86 ++++++++++++- 4 files changed, 200 insertions(+), 8 deletions(-) create mode 100644 reactapp/src/assets/icons/rating__filled-star-icon.svg create mode 100644 reactapp/src/assets/icons/rating__star-icon.svg diff --git a/reactapp/src/ProductStyle.scss b/reactapp/src/ProductStyle.scss index 08f01b2..ee6e70b 100644 --- a/reactapp/src/ProductStyle.scss +++ b/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: 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; + } } \ No newline at end of file diff --git a/reactapp/src/assets/icons/rating__filled-star-icon.svg b/reactapp/src/assets/icons/rating__filled-star-icon.svg new file mode 100644 index 0000000..06c04e1 --- /dev/null +++ b/reactapp/src/assets/icons/rating__filled-star-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/reactapp/src/assets/icons/rating__star-icon.svg b/reactapp/src/assets/icons/rating__star-icon.svg new file mode 100644 index 0000000..1d727b6 --- /dev/null +++ b/reactapp/src/assets/icons/rating__star-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/reactapp/src/pages/ProductPage.tsx b/reactapp/src/pages/ProductPage.tsx index fb79cff..7bf5bcc 100644 --- a/reactapp/src/pages/ProductPage.tsx +++ b/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) => { + setSelectedRating(Number(event.target.value)); + }; + return(
@@ -14,13 +20,60 @@ export default function ProductPage() { Шоколадка Mr. Beast

- Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада! + Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - + + MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!

- +
+ + + + + +
+ + {selectedRating} +
+
+

+ Описание +

+

+ Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада! +

+
    +
  • + Кондитерский +
    • +
  • + Шоколад +
    • +
  • + Mr. Beast +
    • +
  • + Молочный шоколад +
    • +
+
+
+

+ Отзывы +

+
) } \ No newline at end of file