import { NextPage, GetServerSideProps } from 'next'; import Head from 'next/head'; import { z } from 'zod'; import useMediaQuery from '@/hooks/utilities/useMediaQuery'; import { Tab } from '@headlessui/react'; import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById'; import BeerStyleHeader from '@/components/BeerStyleById/BeerStyleHeader'; import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult'; import BeerStyleCommentSection from '@/components/BeerStyleById/BeerStyleCommentSection'; import BeerStyleBeerSection from '@/components/BeerStyleById/BeerStyleBeerSection'; interface BeerStylePageProps { beerStyle: z.infer; } const BeerStyleByIdPage: NextPage = ({ beerStyle }) => { const isDesktop = useMediaQuery('(min-width: 1024px)'); return ( <> {beerStyle.name} <>
{isDesktop ? (
) : ( Comments Beers in this Style )}
); }; export default BeerStyleByIdPage; export const getServerSideProps: GetServerSideProps = async ({ params }) => { const id = params!.id as string; const beerStyle = await getBeerStyleById(id); return { props: { beerStyle: JSON.parse(JSON.stringify(beerStyle)) } }; };