import { GetStaticProps } from 'next'; import Head from 'next/head'; import dynamic from 'next/dynamic'; import { useState } from 'react'; import { Trip } from 'models'; import getTripsData from 'lib/trips'; import Sidebar from 'components/Sidebar/Sidebar'; import Gallery from 'components/Gallery/Gallery'; import styles from 'styles/Home.module.css'; interface Props { allTripsData: Trip[]; } const Map = dynamic(() => import('components/Map/Map'), { ssr: false }); export default function Home({ allTripsData }: Props): JSX.Element { const [currentTrip, setCurrentTrip] = useState(allTripsData[0]); const [currentPhoto, setCurrentPhoto] = useState(null); const [asideOpen, setAsideOpen] = useState(false); function handleMarkerClick(photo: string) { const index = currentTrip.photos.findIndex((p) => p.name === photo); setCurrentPhoto(index); } function handlePhotoChange(direction: boolean): void { if (direction) { if (currentTrip.photos.length > currentPhoto + 1) { setCurrentPhoto(currentPhoto + 1); } } else if (currentPhoto - 1 >= 0) { setCurrentPhoto(currentPhoto - 1); } } return (
Trip Share {currentPhoto !== null && ( setCurrentPhoto(null)} handlePhotoChange={handlePhotoChange} /> )} setAsideOpen(false)} setCurrentTrip={setCurrentTrip} />
); } export const getStaticProps: GetStaticProps = async () => { const allTripsData = getTripsData(); return { props: { allTripsData, }, }; };