Add dbml, minor tweaks to beer style page

src/pages/beers/styles/[id]/index.tsx

@@ -0,0 +1,33 @@
+import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById';
+import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult';
+import { GetServerSideProps, NextPage } from 'next';
+import { z } from 'zod';
+
+interface BeerStylePageProps {
+  beerStyle: z.infer<typeof BeerStyleQueryResult>;
+}
+
+const BeerStylePage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
+  return (
+    <div>
+      <h1>{beerStyle.name}</h1>
+      <p>{beerStyle.description}</p>
+    </div>
+  );
+};
+
+export default BeerStylePage;
+
+export const getServerSideProps: GetServerSideProps<BeerStylePageProps> = async (
+  context,
+) => {
+  const beerStyle = await getBeerStyleById(context.params!.id! as string);
+
+  if (!beerStyle) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return { props: { beerStyle: JSON.parse(JSON.stringify(beerStyle)) } };
+};

src/pages/beers/styles/index.tsx

@@ -38,7 +38,7 @@ const BeerStylePage: NextPage = () => {
           <header className="my-10 flex justify-between lg:flex-row">
             <div>
               <h1 className="text-4xl font-bold lg:text-6xl">The Biergarten App</h1>
-              <h2 className="text-2xl font-bold lg:text-4xl">Types</h2>
+              <h2 className="text-2xl font-bold lg:text-4xl">Styles</h2>
             </div>
           </header>
           <div className="grid gap-6 xl:grid-cols-2">