AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Update pages to include links to beer styles

Browse Source
This commit is contained in:
Aaron William Po
2023-10-08 12:27:20 -04:00
parent 3b626e2f95
commit 27af922a91
7 changed files with 166 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/beers/styles/[id]/index.tsx
View File

@@ -1,33 +1,65 @@
import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById';
import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult';
import { GetServerSideProps, NextPage } from 'next';
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';
interface BeerStylePageProps {
beerStyle: z.infer<typeof BeerStyleQueryResult>;
}
const BeerStylePage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
const BeerByIdPage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
const isDesktop = useMediaQuery('(min-width: 1024px)');
return (
<div>
<h1>{beerStyle.name}</h1>
<p>{beerStyle.description}</p>
</div>
<>
<Head>
<title>{beerStyle.name}</title>
<meta name="description" content={beerStyle.description} />
</Head>
<>
<main className="mb-12 mt-10 flex w-full items-center justify-center">
<div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
<BeerStyleHeader beerStyle={beerStyle} />
{isDesktop ? (
<div className="mt-4 flex flex-row space-x-3 space-y-0">
<div className="w-[60%]">{/* Comments go here */}</div>
<div className="w-[40%]">{/* Recommendations go here */}</div>
</div>
) : (
<Tab.Group>
<Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
Comments
</Tab>
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
Beers in this Style
</Tab>
</Tab.List>
<Tab.Panels className="mt-2">
<Tab.Panel>{/* Comments go here */}</Tab.Panel>
<Tab.Panel>{/* Recommendations go here */}</Tab.Panel>
</Tab.Panels>
</Tab.Group>
)}
</div>
</main>
</>
</>
);
};
export default BeerStylePage;
export default BeerByIdPage;
export const getServerSideProps: GetServerSideProps<BeerStylePageProps> = async (
context,
) => {
const beerStyle = await getBeerStyleById(context.params!.id! as string);
if (!beerStyle) {
return {
notFound: true,
};
}
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)) } };
};

2
src/pages/beers/styles/index.tsx
View File

@@ -4,7 +4,7 @@ import { MutableRefObject, useRef } from 'react';
import { FaArrowUp } from 'react-icons/fa';
import { useInView } from 'react-intersection-observer';
import BeerStyleCard from '@/components/BeerStyle/BeerStyleCard';
import BeerStyleCard from '@/components/BeerStyleIndex/BeerStyleCard';
import SmLoadingCard from '@/components/ui/SmLoadingCard';
import Spinner from '@/components/ui/Spinner';
import useBeerStyles from '@/hooks/data-fetching/beer-styles/useBeerStyles';