import { NextPage, GetServerSideProps } from 'next'; import Head from 'next/head'; import Image from 'next/image'; import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader'; import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSection'; import BeerRecommendations from '@/components/BeerById/BeerRecommendations'; import Layout from '@/components/ui/Layout'; import getBeerPostById from '@/services/BeerPost/getBeerPostById'; import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations'; import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult'; import { BeerPost } from '@prisma/client'; import { z } from 'zod'; import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader import { Carousel } from 'react-responsive-carousel'; import useMediaQuery from '@/hooks/useMediaQuery'; import { Tab } from '@headlessui/react'; interface BeerPageProps { beerPost: z.infer; beerRecommendations: (BeerPost & { brewery: { id: string; name: string }; beerImages: { id: string; alt: string; url: string }[]; })[]; } const BeerByIdPage: NextPage = ({ beerPost, beerRecommendations }) => { const isDesktop = useMediaQuery('(min-width: 1024px)'); return ( <> {beerPost.name}
{beerPost.beerImages.length ? beerPost.beerImages.map((image, index) => (
{image.alt}
)) : Array.from({ length: 1 }).map((_, i) => (
))}
{isDesktop ? (
) : ( Comments Other Beers )}
); }; export const getServerSideProps: GetServerSideProps = async (context) => { const beerPost = await getBeerPostById(context.params!.id! as string); if (!beerPost) { return { notFound: true }; } const { type, brewery, id } = beerPost; const beerRecommendations = await getBeerRecommendations({ type, brewery, id }); const props = { beerPost: JSON.parse(JSON.stringify(beerPost)), beerRecommendations: JSON.parse(JSON.stringify(beerRecommendations)), }; return { props }; }; export default BeerByIdPage;