Browse Source

Added initial code for the grid and map section.

🚗 Implemented car card rendering.
🗺️ Integrated Google Maps API for location display.
📅 Added date and filter components.
📈 Implemented pagination functionality.
🌟 Improved hover effect for car cards.
🪙 Fixed responsive design issues.
📝 Updated comments and code documentation.
🎨 Improved styling for a better user experience.
main
John Doe 1 year ago
parent
commit
c2137c8a89
  1. 112
      src/app/(car-listings)/SectionGridHasMap.tsx

112
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;
Loading…
Cancel
Save