From f921a20c3795c8ef590f1b5aea0e2d01fb2deafb Mon Sep 17 00:00:00 2001
From: Mykola <53128883+Nikolaus-B@users.noreply.github.com>
Date: Sun, 24 Mar 2024 20:54:34 +0200
Subject: [PATCH] add stars

---
 src/components/Car/Car.jsx                    |  9 ++++---
 src/components/Car/Car.styled.js              |  7 ++++++
 .../FeaturesPopUp/FeaturesPopUp.styled.js     |  3 +++
 src/components/ReviewsPopUp/ReviewsPopUp.jsx  | 24 +++++++++++++++++--
 .../ReviewsPopUp/ReviewsPopUp.styled.js       |  6 +++++
 5 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/components/Car/Car.jsx b/src/components/Car/Car.jsx
index 77f8005..7e58c0a 100644
--- a/src/components/Car/Car.jsx
+++ b/src/components/Car/Car.jsx
@@ -8,6 +8,7 @@ import {
   HeadInfocontainer,
   LocationAndRating,
   PriceContainer,
+  ReviewsAndStarContainer,
   ShowMoreBtn,
   TagsContainer,
 } from "./Car.styled";
@@ -59,9 +60,11 @@ export const Car = ({ car, hidden }) => {
           </PriceContainer>
         </HeadInfocontainer>
         <LocationAndRating>
-          <p>
-            {car.rating} <span>{car.reviews.length || 0} Reviews</span>
-          </p>
+          <ReviewsAndStarContainer>
+            <Icon width={16} height={16} iconId={"star-yellow"} />
+            <p>{car.rating}</p>
+            <span>{car.reviews.length || 0} Reviews</span>
+          </ReviewsAndStarContainer>
           <p>{car.location}</p>
         </LocationAndRating>
         <Desctiption>{car.description}</Desctiption>
diff --git a/src/components/Car/Car.styled.js b/src/components/Car/Car.styled.js
index 09a4b5a..a4f18a7 100644
--- a/src/components/Car/Car.styled.js
+++ b/src/components/Car/Car.styled.js
@@ -87,6 +87,13 @@ export const LocationAndRating = styled.div`
   gap: 16px;
 `;
 
+export const ReviewsAndStarContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+
 export const Location = styled.p``;
 
 export const Desctiption = styled.p`
diff --git a/src/components/FeaturesPopUp/FeaturesPopUp.styled.js b/src/components/FeaturesPopUp/FeaturesPopUp.styled.js
index 39d4a28..effd657 100644
--- a/src/components/FeaturesPopUp/FeaturesPopUp.styled.js
+++ b/src/components/FeaturesPopUp/FeaturesPopUp.styled.js
@@ -22,6 +22,9 @@ export const FeaturedHead = styled.p`
 
 export const InfoContainer = styled.div`
   margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 `;
 
 export const InfoWrapper = styled.div`
diff --git a/src/components/ReviewsPopUp/ReviewsPopUp.jsx b/src/components/ReviewsPopUp/ReviewsPopUp.jsx
index 5dc8901..cb42c98 100644
--- a/src/components/ReviewsPopUp/ReviewsPopUp.jsx
+++ b/src/components/ReviewsPopUp/ReviewsPopUp.jsx
@@ -7,14 +7,32 @@ import {
   ReviewImageLetter,
   ReviewList,
   ReviewerName,
+  StarsContainer,
 } from "./ReviewsPopUp.styled";
+import { Icon } from "../Icon/Icon";
 
 export const ReviewsPopUp = ({ reviews }) => {
+  const renderStars = (rating) => {
+    const yellowStars = Math.floor(rating);
+    const grayStars = 5 - yellowStars;
+
+    const stars = [];
+    for (let i = 0; i < yellowStars; i++) {
+      stars.push(
+        <Icon width={16} height={16} key={`star-${i}`} iconId={"star-yellow"} />
+      );
+    }
+    for (let i = 0; i < grayStars; i++) {
+      stars.push(
+        <Icon width={16} height={16} key={`gray-star-${i}`} iconId={"star"} />
+      );
+    }
+    return stars;
+  };
   return (
     <div>
       <ReviewList>
         {reviews.map((review) => {
-          console.log(review);
           return (
             <Review key={uid()}>
               <ReviewHeader>
@@ -27,7 +45,9 @@ export const ReviewsPopUp = ({ reviews }) => {
                   <ReviewerName>
                     {review.reviewer_name ? review.reviewer_name : "anonim"}
                   </ReviewerName>
-                  <div></div>
+                  <StarsContainer>
+                    {renderStars(review.reviewer_rating)}
+                  </StarsContainer>
                 </ReviewHeaderWrapper>
               </ReviewHeader>
               <ReviewComment>{review.comment}</ReviewComment>
diff --git a/src/components/ReviewsPopUp/ReviewsPopUp.styled.js b/src/components/ReviewsPopUp/ReviewsPopUp.styled.js
index 7027f55..f6a3bb0 100644
--- a/src/components/ReviewsPopUp/ReviewsPopUp.styled.js
+++ b/src/components/ReviewsPopUp/ReviewsPopUp.styled.js
@@ -15,6 +15,12 @@ export const ReviewHeader = styled.div`
   margin-bottom: 16px;
 `;
 
+export const StarsContainer = styled.div`
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+`;
+
 export const ReviewImageLetter = styled.p`
   display: flex;
   justify-content: center;