add stars

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>

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`

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`

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>

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;