add animation

src/components/Car/Car.styled.js

@@ -11,14 +11,14 @@ export const CarItem = styled.li`
  padding: 24px;
 
  border: 1px solid ${(p) => p.theme.colors.borderColor};
- border-radius: 20px;
+ border-radius: ${(p) => p.theme.radius.md};
 `;
 
 export const CarImage = styled.div`
  width: 100%;
  height: 310px;
 
- border-radius: 10px;
+ border-radius: ${(p) => p.theme.radius.sm};
  background-image: url(${(props) => props.$bgImage});
  background-size: auto 100%;
  background-repeat: no-repeat;
@@ -36,16 +36,18 @@ export const PriceContainer = styled.div`
  gap: 10px;
 `;
 export const HeadInfo = styled.p`
- font-size: 24px;
+ font-size: ${(p) => p.theme.fonts.bigSize};
  line-height: 30px;
- font-weight: 600;
+ font-weight: ${(p) => p.theme.fonts.bold};
 `;
 
 export const LocationAndRating = styled.div`
  display: flex;
  gap: 16px;
 `;
 
+export const Location = styled.p``;
+
 export const Desctiption = styled.p`
  width: 525px;
  white-space: nowrap;
@@ -69,7 +71,7 @@ export const TagsContainer = styled.div`
 export const TagContainer = styled.div`
  padding: 12px 18px;
  background-color: ${(p) => p.theme.colors.mainWhite};
- border-radius: 100px;
+ border-radius: ${(p) => p.theme.radius.lg};
 `;
 
 export const TagText = styled.p`
@@ -82,7 +84,7 @@ export const ShowMoreBtn = styled.button`
  height: 56px;
 
  background-color: ${(p) => p.theme.colors.red};
- border-radius: 200px;
+ border-radius: ${(p) => p.theme.radius.xlg};
  border: none;
  color: ${(p) => p.theme.colors.buttonText};
  transition: background-color ${(p) => p.theme.transition.transitionDurAndFunc};

src/components/CarModal/CarModal.jsx

@@ -1,31 +1,45 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Modal from "react-modal";
+import { CarImage } from "../Car/Car.styled";
+import { uid } from "uid";
+import {
+ ImagesList,
+ ModalDescription,
+ ModalLocationAndRating,
+ ModalName,
+ ModalPrice,
+ PopUpsBtnContainer,
+ PopupsBtns,
+} from "./CarModal.styled";
 
 const customStyles = {
  overlay: {
  position: "fixed",
  width: "100vw",
- // height: "100vh",
+ height: "100vh",
  padding: "40px 0 40px 0",
  background: "rgba(0, 0, 0, 0.8)",
  },
 
  content: {
+ position: "relative",
  width: "982px",
- height: "720px",
- margin: "0 auto 20px auto ",
+ height: "700px",
+ margin: "0 auto",
+ top: "0",
  // overflow: "hidden",
- // WebkitOverflowScrolling: "touch",
+
  borderRadius: "4px",
  outline: "none",
- // padding: "20px",
- bottom: "20px",
+ padding: "20px 20px 40px 20px",
  },
 };
 
 Modal.setAppElement("#root");
 
-export const CarModal = ({ modalIsOpen, closeModal }) => {
+export const CarModal = ({ modalIsOpen, closeModal, car }) => {
+ const [showPopUp, setShowPopUp] = useState(false);
+
  useEffect(() => {
  const originalOverflow = document.body.style.overflow;
  if (modalIsOpen) {
@@ -55,8 +69,38 @@ export const CarModal = ({ modalIsOpen, closeModal }) => {
  style={customStyles}
  contentLabel="Car Modal"
  >
- <div style={{ overflowY: "scroll", maxHeight: "80vh" }}>
- {/* Your modal content here */}
+ <div>
+ <ModalName>{car.name}</ModalName>
+ <ModalLocationAndRating>
+ <p>
+ {car.rating} <span>{car.reviews.length || 0} Reviews</span>
+ </p>
+ <p>{car.location}</p>
+ </ModalLocationAndRating>
+ <ModalPrice>€{car.price}.00</ModalPrice>
+
+ <ImagesList>
+ {car.gallery.map((el) => {
+ return <CarImage $bgImage={el} key={uid()}></CarImage>;
+ })}
+ </ImagesList>
+
+ <ModalDescription>{car.description}</ModalDescription>
+
+ <PopUpsBtnContainer>
+ <PopupsBtns
+ onClick={() => setShowPopUp(!showPopUp)}
+ className={showPopUp ? "" : "isOpen"}
+ >
+ Features
+ </PopupsBtns>
+ <PopupsBtns
+ onClick={() => setShowPopUp(!showPopUp)}
+ className={showPopUp ? "isOpen" : ""}
+ >
+ Reviews
+ </PopupsBtns>
+ </PopUpsBtnContainer>
  </div>
  </Modal>
  );

src/components/CarModal/CarModal.styled.js

@@ -0,0 +1,69 @@
+import styled, { keyframes } from "styled-components";
+
+export const ModalName = styled.p`
+ font-size: ${(p) => p.theme.fonts.bigSize};
+ line-height: 30px;
+ font-weight: ${(p) => p.theme.fonts.bold};
+ margin-bottom: 10px;
+`;
+
+export const ModalLocationAndRating = styled.div`
+ display: flex;
+ gap: 16px;
+ margin-bottom: 16px;
+`;
+
+export const ModalPrice = styled.p`
+ font-size: ${(p) => p.theme.fonts.bigSize};
+ line-height: 30px;
+ font-weight: ${(p) => p.theme.fonts.bold};
+ margin-bottom: 24px;
+`;
+
+export const ImagesList = styled.div`
+ display: flex;
+ gap: 16px;
+ margin-bottom: 24px;
+`;
+
+export const ModalDescription = styled.p`
+ color: ${(p) => p.theme.colors.grey};
+`;
+
+export const PopUpsBtnContainer = styled.div`
+ display: flex;
+ gap: 40px;
+ margin-top: 44px;
+ border-bottom: 1px solid ${(p) => p.theme.colors.borderColor};
+`;
+
+const expandAnimation = keyframes`
+ 0% {
+ transform: scaleX(0);
+ }
+ 100% {
+ transform: scaleX(1);
+ }
+`;
+
+export const PopupsBtns = styled.button`
+ position: relative;
+ font-size: ${(p) => p.theme.fonts.mdSize};
+ font-weight: ${(p) => p.theme.fonts.bold};
+ border: none;
+ background-color: transparent;
+ padding-bottom: 24px;
+
+ &.isOpen {
+ &::after {
+ content: "";
+ position: absolute;
+ display: block;
+ bottom: -3px;
+ width: 85px;
+ height: 5px;
+ background-color: ${(p) => p.theme.colors.red};
+ animation: ${expandAnimation} 0.3s ease-out forwards;
+ }
+ }
+`;

src/components/CarsList/CarsList.jsx

@@ -10,6 +10,7 @@ export const CarsList = () => {
  <ListContainer>
  <CarList>
  {cars.map((car) => {
+ console.log(car);
  return <Car key={car.id} car={car.car} />;
  })}
  </CarList>

src/components/CarsList/CarsList.styled.js

@@ -20,7 +20,7 @@ export const LoadMore = styled.button`
 
  background-color: transparent;
  border: 1px solid ${(p) => p.theme.colors.loadMoreBorderColor};
- border-radius: 200px;
+ border-radius: ${(p) => p.theme.radius.xlg};
 
  transition: border ${(p) => p.theme.transition.transitionDurAndFunc};
 

src/components/FeaturesPopUp/FeaturesPopUp.jsx

@@ -0,0 +1,3 @@
+export const FeaturesPopUp = () => {
+ return <div>FeaturesPopUp</div>;
+};

src/components/FilterButton/FilterButton.styled.js

@@ -14,7 +14,7 @@ export const FilterButtonStyled = styled.button`
  font-weight: 500;
 
  border: 1px solid rgba(16, 24, 40, 0.2);
- border-radius: 10px;
+ border-radius: ${(p) => p.theme.radius.sm};
  background-color: transparent;
 `;
 

src/components/Filters/Filters.styled.js

@@ -11,7 +11,7 @@ export const FilterInput = styled.input`
  padding: 18px;
 
  border: none;
- border-radius: 10px;
+ border-radius: ${(p) => p.theme.radius.sm};
  background-color: ${(p) => p.theme.colors.white};
  outline: none;
 `;
@@ -51,7 +51,7 @@ export const SearchButton = styled.button`
  margin-top: 32px;
 
  background-color: ${(p) => p.theme.colors.red};
- border-radius: 200px;
+ border-radius: ${(p) => p.theme.radius.xlg};
  border: none;
  color: ${(p) => p.theme.colors.buttonText};
 

src/components/FormPopUp/FormPopUp.jsx

@@ -0,0 +1,3 @@
+export const FormPopUp = () => {
+ return <div>FormPopUp</div>;
+};

src/components/FormPopUp/FormPopUp.styled.js

@@ -0,0 +1 @@
+

src/components/ReviewsPopUp/ReviewsPopUp.jsx

@@ -0,0 +1,3 @@
+export const ReviewsPopUp = () => {
+ return <div>ReviewsPopUp</div>;
+};

src/theme.js

@@ -12,13 +12,22 @@ export const theme = {
  loadMoreBorderColor: "rgba(71, 84, 103, 0.2)",
  },
  radius: {
- sm: "4px",
- md: "8px",
- lg: "16px",
+ sm: "10px",
+ md: "20px",
+ lg: "100px",
+ xlg: "200px",
+ },
+ fonts: {
+ mdSize: "20px",
+ bigSize: "24px",
+ bigHeith: "30px",
+ bold: "600",
  },
  transition: {
  transitionDurAndFunc: "250ms cubic-bezier(0.4, 0, 0.2, 1)",
  },
 };
 
 // ${p => p.theme.colors.white}
+// ${p => p.theme.radius.sm}
+// ${p => p.theme.fonts.mdSize}