Browse Source
✨ Added initial code for the grid and map section.
✨ 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
1 changed files with 112 additions and 0 deletions
@ -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; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue