add stars

Nikolaus-B · Mar 24, 2024 · f921a20 · f921a20
1 parent 16af31b
commit f921a20
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;