add details

src/components/Car/Car.jsx

@@ -6,6 +6,7 @@ import {
  FavouriteButton,
  HeadInfo,
  HeadInfocontainer,
+ HeadName,
  LocationAndRating,
  PriceContainer,
  ReviewsAndStarContainer,
@@ -18,6 +19,7 @@ import { Details } from "../Details/Details";
 import { useDispatch } from "react-redux";
 import { toggleFavourite } from "../../redux/cars/carsSlice";
 import { useIsFavourite } from "../../hooks/useIsFavourite";
+import { Detail } from "../Details/Detail";
 
 export const Car = ({ car, hidden }) => {
  const [modalIsOpen, setIsOpen] = useState(false);
@@ -47,7 +49,7 @@ export const Car = ({ car, hidden }) => {
  ></CarImage>
  <div>
  <HeadInfocontainer>
- <HeadInfo>{car.name}</HeadInfo>
+ <HeadName>{car.name}</HeadName>
  <PriceContainer>
  <HeadInfo>€{car.price}.00</HeadInfo>
  <FavouriteButton onClick={() => toogleFavouriteCar(car._id)}>
@@ -69,6 +71,8 @@ export const Car = ({ car, hidden }) => {
  </LocationAndRating>
  <Desctiption>{car.description}</Desctiption>
  <TagsContainer>
+ <Detail detail={"adults"} value={car.adults} iconId={"people"} />
+ <Detail detail={car.transmission} value={""} iconId={"automatic"} />
  <Details details={car.details} />
  </TagsContainer>
  <ShowMoreBtn onClick={() => openModal()}>Show more</ShowMoreBtn>

src/components/Car/Car.styled.js

@@ -68,8 +68,19 @@ export const HeadInfocontainer = styled.div`
 export const PriceContainer = styled.div`
  display: flex;
  gap: 10px;
- /* margin-bottom: 24px; */
 `;
+
+export const HeadName = styled.p`
+ width: 370px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: ${(p) => p.theme.fonts.bigSize};
+ line-height: 30px;
+
+ font-weight: ${(p) => p.theme.fonts.bold};
+`;
+
 export const HeadInfo = styled.p`
  font-size: ${(p) => p.theme.fonts.bigSize};
  line-height: 30px;

src/components/Details/Detail.jsx

@@ -0,0 +1,14 @@
+import { uid } from "uid";
+import { TagContainer, TagText } from "./Details.styled";
+import { Icon } from "../Icon/Icon";
+
+export const Detail = ({ detail, value, iconId }) => {
+ return (
+ <TagContainer key={uid()}>
+ <Icon width={20} height={20} iconId={iconId} />
+ <TagText>
+ {value} {detail}
+ </TagText>
+ </TagContainer>
+ );
+};

src/components/FeaturesPopUp/FeaturesPopUp.jsx

@@ -1,3 +1,4 @@
+import { Detail } from "../Details/Detail";
 import { Details } from "../Details/Details";
 import {
  DetailsContainer,
@@ -16,6 +17,8 @@ export const FeaturesPopUp = ({ car }) => {
  <FeaturesContainer>
  <FeaturesWrapper>
  <DetailsContainer>
+ <Detail detail={"adults"} value={car.adults} iconId={"people"} />
+ <Detail detail={car.transmission} value={""} iconId={"automatic"} />
  <Details details={car.details} />
  </DetailsContainer>
  <FeaturedHead>Vehicle details</FeaturedHead>

src/components/Loader/Loader.jsx

@@ -6,7 +6,7 @@ export const Loader = () => {
  <Backbrop>
  <LoaderContainer>
  <RotatingLines
- strokeColor="#4f58fd"
+ strokeColor="#D84343"
  strokeWidth="5"
  animationDuration="0.75"
  width="96"

src/pages/NotFoundPage.jsx

@@ -1,9 +1,12 @@
+import { Link } from "react-router-dom";
+
 export default function NotFoundPage() {
  return (
  <section>
- <div>
- <p>NotFoundPage</p>
- </div>
+ <div>Not Found Page</div>
+ <p>
+ Click to return to <Link to="/">home</Link>
+ </p>
  </section>
  );
 }