add modal

package.json

@@ -15,6 +15,7 @@
  "modern-normalize": "^2.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-modal": "^3.16.1",
  "react-redux": "^9.1.0",
  "react-router-dom": "^6.22.3",
  "styled-components": "^6.1.8",

src/components/Car/Car.jsx

@@ -13,8 +13,20 @@ import {
  TagText,
  TagsContainer,
 } from "./Car.styled";
+import { CarModal } from "../CarModal/CarModal";
+import { useState } from "react";
 
 export const Car = ({ car }) => {
+ const [modalIsOpen, setIsOpen] = useState(false);
+
+ function openModal() {
+ setIsOpen(true);
+ }
+
+ function closeModal() {
+ setIsOpen(false);
+ }
+
  const defineTabs = (tab, value) => {
  if (tab === "beds") {
  return value;
@@ -34,13 +46,6 @@ export const Car = ({ car }) => {
  "https://t4.ftcdn.net/jpg/04/70/29/97/360_F_470299797_UD0eoVMMSUbHCcNJCdv2t8B2g1GVqYgs.jpg"
  }
  ></CarImage>
- {/* <CarImage
- src={
- car.gallery[0] ||
- "https://t4.ftcdn.net/jpg/04/70/29/97/360_F_470299797_UD0eoVMMSUbHCcNJCdv2t8B2g1GVqYgs.jpg"
- }
- alt="car image"
- /> */}
  <div>
  <HeadInfocontainer>
  <HeadInfo>{car.name}</HeadInfo>
@@ -70,8 +75,10 @@ export const Car = ({ car }) => {
  );
  })}
  </TagsContainer>
- <ShowMoreBtn>Show more</ShowMoreBtn>
+ <ShowMoreBtn onClick={() => openModal()}>Show more</ShowMoreBtn>
  </div>
+
+ <CarModal modalIsOpen={modalIsOpen} closeModal={closeModal} car={car} />
  </CarItem>
  );
 };

src/components/CarModal/CarModal.jsx

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import Modal from "react-modal";
+
+const customStyles = {
+ overlay: {
+ position: "fixed",
+ width: "100vw",
+ // height: "100vh",
+ padding: "40px 0 40px 0",
+ background: "rgba(0, 0, 0, 0.8)",
+ },
+
+ content: {
+ width: "982px",
+ height: "720px",
+ margin: "0 auto 20px auto ",
+ // overflow: "hidden",
+ // WebkitOverflowScrolling: "touch",
+ borderRadius: "4px",
+ outline: "none",
+ // padding: "20px",
+ bottom: "20px",
+ },
+};
+
+Modal.setAppElement("#root");
+
+export const CarModal = ({ modalIsOpen, closeModal }) => {
+ useEffect(() => {
+ const originalOverflow = document.body.style.overflow;
+ if (modalIsOpen) {
+ const scrollY = window.scrollY;
+ document.body.style.overflow = "hidden";
+ document.body.style.position = "fixed";
+ document.body.style.top = `-${scrollY}px`;
+ } else {
+ const scrollY = parseInt(document.body.style.top || "0");
+ document.body.style.overflow = originalOverflow;
+ document.body.style.position = "";
+ document.body.style.top = "";
+ window.scrollTo(0, scrollY * -1);
+ }
+
+ return () => {
+ document.body.style.overflow = originalOverflow;
+ document.body.style.position = "";
+ document.body.style.top = "";
+ };
+ }, [modalIsOpen]);
+
+ return (
+ <Modal
+ isOpen={modalIsOpen}
+ onRequestClose={closeModal}
+ style={customStyles}
+ contentLabel="Car Modal"
+ >
+ <div style={{ overflowY: "scroll", maxHeight: "80vh" }}>
+ {/* Your modal content here */}
+ </div>
+ </Modal>
+ );
+};