From c2137c8a89c8a47d895bfd0d8f7cc6bc3c772e52 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Thu, 14 Sep 2023 17:03:56 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20initial=20code=20for=20the?=
 =?UTF-8?q?=20grid=20and=20map=20section.=20=F0=9F=9A=97=20Implemented=20c?=
 =?UTF-8?q?ar=20card=20rendering.=20=F0=9F=97=BA=EF=B8=8F=20Integrated=20G?=
 =?UTF-8?q?oogle=20Maps=20API=20for=20location=20display.=20=F0=9F=93=85?=
 =?UTF-8?q?=20Added=20date=20and=20filter=20components.=20=F0=9F=93=88=20I?=
 =?UTF-8?q?mplemented=20pagination=20functionality.=20=F0=9F=8C=9F=20Impro?=
 =?UTF-8?q?ved=20hover=20effect=20for=20car=20cards.=20=F0=9F=AA=99=20Fixe?=
 =?UTF-8?q?d=20responsive=20design=20issues.=20=F0=9F=93=9D=20Updated=20co?=
 =?UTF-8?q?mments=20and=20code=20documentation.=20=F0=9F=8E=A8=20Improved?=
 =?UTF-8?q?=20styling=20for=20a=20better=20user=20experience.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(car-listings)/SectionGridHasMap.tsx | 112 +++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 src/app/(car-listings)/SectionGridHasMap.tsx

diff --git a/src/app/(car-listings)/SectionGridHasMap.tsx b/src/app/(car-listings)/SectionGridHasMap.tsx
new file mode 100644
index 0000000..5908844
--- /dev/null
+++ b/src/app/(car-listings)/SectionGridHasMap.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import React, { FC, useState } from "react";
+import GoogleMapReact from "google-map-react";
+import { DEMO_CAR_LISTINGS } from "@/data/listings";
+import ButtonClose from "@/shared/ButtonClose";
+import Checkbox from "@/shared/Checkbox";
+import Pagination from "@/shared/Pagination";
+import TabFilters from "./TabFilters";
+import Heading2 from "@/shared/Heading2";
+import CarCardH from "@/components/CarCardH";
+import AnyReactComponent from "@/components/AnyReactComponent/AnyReactComponent";
+
+const DEMO_CARS = DEMO_CAR_LISTINGS.filter((_, i) => i < 12);
+
+export interface SectionGridHasMapProps {}
+
+const SectionGridHasMap: FC<SectionGridHasMapProps> = () => {
+  const [currentHoverID, setCurrentHoverID] = useState<string | number>(-1);
+  const [showFullMapFixed, setShowFullMapFixed] = useState(false);
+
+  return (
+    <div>
+      <div className="relative flex min-h-screen">
+        {/* CARDSSSS */}
+        <div className="min-h-screen w-full xl:w-[780px] 2xl:w-[880px] flex-shrink-0 xl:px-8 ">
+          <Heading2
+            heading="Cars in Tokyo"
+            subHeading={
+              <span className="block text-neutral-500 dark:text-neutral-400 mt-3">
+                233 cars
+                <span className="mx-2">·</span>
+                Aug 12 - 18
+              </span>
+            }
+          />
+          <div className="mb-8 lg:mb-11">
+            <TabFilters />
+          </div>
+          <div className="grid grid-cols-1 gap-8">
+            {DEMO_CARS.map((item) => (
+              <div
+                key={item.id}
+                onMouseEnter={() => setCurrentHoverID((_) => item.id)}
+                onMouseLeave={() => setCurrentHoverID((_) => -1)}
+              >
+                <CarCardH data={item} />
+              </div>
+            ))}
+          </div>
+          <div className="flex mt-16 justify-center items-center">
+            <Pagination />
+          </div>
+        </div>
+
+        <div
+          className="flex xl:hidden items-center justify-center fixed bottom-8 left-1/2 transform -translate-x-1/2 px-6 py-2 bg-neutral-900 text-white shadow-2xl rounded-full z-30  space-x-3 text-sm cursor-pointer"
+          onClick={() => setShowFullMapFixed(true)}
+        >
+          <i className="text-lg las la-map"></i>
+          <span>Show map</span>
+        </div>
+
+        {/* MAPPPPP */}
+        <div
+          className={`xl:flex-grow xl:static xl:block ${
+            showFullMapFixed ? "fixed inset-0 z-50" : "hidden"
+          }`}
+        >
+          {showFullMapFixed && (
+            <ButtonClose
+              onClick={() => setShowFullMapFixed(false)}
+              className="bg-white absolute z-50 left-3 top-3 shadow-lg rounded-xl w-10 h-10"
+            />
+          )}
+
+          <div className="fixed xl:sticky top-0 xl:top-[88px] left-0 w-full h-full xl:h-[calc(100vh-88px)] rounded-md overflow-hidden">
+            <div className="absolute bottom-5 left-3 lg:bottom-auto lg:top-2.5 lg:left-1/2 transform lg:-translate-x-1/2 py-2 px-4 bg-white shadow-xl z-10 rounded-2xl min-w-max">
+              <Checkbox
+                className="text-xs xl:text-sm text-neutral-800"
+                name="xx"
+                label="Search ass I move the map"
+              />
+            </div>
+            {/* BELLOW IS MY GOOGLE API KEY -- PLEASE DELETE AND TYPE YOUR API KEY */}
+
+            <GoogleMapReact
+              bootstrapURLKeys={{
+                key: "AIzaSyAGVJfZMAKYfZ71nzL_v5i3LjTTWnCYwTY",
+              }}
+              yesIWantToUseGoogleMapApiInternals
+              defaultZoom={12}
+              defaultCenter={DEMO_CARS[0].map}
+            >
+              {DEMO_CARS.map((item) => (
+                <AnyReactComponent
+                  isSelected={currentHoverID === item.id}
+                  key={item.id}
+                  lat={item.map.lat}
+                  lng={item.map.lng}
+                  car={item}
+                />
+              ))}
+            </GoogleMapReact>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridHasMap;