import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult'; import { GetServerSideProps, NextPage } from 'next'; import { z } from 'zod'; import Head from 'next/head'; import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader import { Carousel } from 'react-responsive-carousel'; import useMediaQuery from '@/hooks/utilities/useMediaQuery'; import { Tab } from '@headlessui/react'; import dynamic from 'next/dynamic'; import { MAPBOX_ACCESS_TOKEN } from '@/config/env'; import { CldImage } from 'next-cloudinary'; import { getBreweryPostByIdService } from '@/services/posts/brewery-post'; const [BreweryInfoHeader, BreweryBeersSection, BreweryCommentsSection, BreweryPostMap] = [ dynamic(() => import('@/components/BreweryById/BreweryInfoHeader')), dynamic(() => import('@/components/BreweryById/BreweryBeerSection')), dynamic(() => import('@/components/BreweryById/BreweryCommentsSection')), dynamic(() => import('@/components/BreweryById/BreweryPostMap')), ]; interface BreweryPageProps { breweryPost: z.infer; mapboxToken: string; } const BreweryByIdPage: NextPage = ({ breweryPost, mapboxToken }) => { const [longitude, latitude] = breweryPost.location.coordinates; const isDesktop = useMediaQuery('(min-width: 1024px)'); return ( <> {breweryPost.name} <> {breweryPost.breweryImages.length ? breweryPost.breweryImages.map((image, index) => (
)) : Array.from({ length: 1 }).map((_, i) => (
))}
{isDesktop ? (
) : ( <> Comments Beers )}
); }; export const getServerSideProps: GetServerSideProps = async ( context, ) => { const breweryPost = await getBreweryPostByIdService({ breweryPostId: context.params?.id as string, }); const mapboxToken = MAPBOX_ACCESS_TOKEN; return !breweryPost ? { notFound: true } : { props: { breweryPost: JSON.parse(JSON.stringify(breweryPost)), mapboxToken } }; }; export default BreweryByIdPage;