Work on brewery page, refactors

Refactor query types to explicitly use z.infer

pages/breweries/[id].tsx

@@ -1,10 +1,12 @@
 import Layout from '@/components/ui/Layout';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+
 import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import { GetServerSideProps, NextPage } from 'next';
+import { z } from 'zod';
 
 interface BreweryPageProps {
-  breweryPost: BeerPostQueryResult;
+  breweryPost: z.infer<typeof BreweryPostQueryResult>;
 }
 
 const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {

pages/breweries/index.tsx

@@ -4,24 +4,58 @@ import Link from 'next/link';
 import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
 import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import Layout from '@/components/ui/Layout';
+import { FC } from 'react';
+import Image from 'next/image';
+import { z } from 'zod';
 
 interface BreweryPageProps {
-  breweryPosts: BreweryPostQueryResult[];
+  breweryPosts: z.infer<typeof BreweryPostQueryResult>[];
 }
 
+const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
+  brewery,
+}) => {
+  return (
+    <div className="card bg-base-300" key={brewery.id}>
+      <figure className="card-image h-96">
+        {brewery.breweryImages.length > 0 && (
+          <Image
+            src={brewery.breweryImages[0].path}
+            alt={brewery.name}
+            width="1029"
+            height="110"
+          />
+        )}
+      </figure>
+      <div className="card-body space-y-3">
+        <div>
+          <h2 className="text-3xl font-bold">
+            <Link href={`/breweries/${brewery.id}`}>{brewery.name}</Link>
+          </h2>
+          <h3 className="text-xl font-semibold">{brewery.location}</h3>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
   return (
     <Layout>
-      <h1 className="text-3xl font-bold underline">Brewery Posts</h1>
-      {breweryPosts.map((post) => {
-        return (
-          <div key={post.id}>
-            <h2>
-              <Link href={`/breweries/${post.id}`}>{post.name}</Link>
-            </h2>
+      <div className="flex items-center justify-center bg-base-100">
+        <div className="my-10 flex w-10/12 flex-col space-y-4">
+          <header className="my-10">
+            <div className="space-y-2">
+              <h1 className="text-6xl font-bold">Breweries</h1>
+            </div>
+          </header>
+          <div className="grid gap-5 md:grid-cols-1 xl:grid-cols-2">
+            {breweryPosts.map((brewery) => {
+              return <BreweryCard brewery={brewery} key={brewery.id} />;
+            })}
           </div>
-        );
-      })}
+        </div>
+      </div>
     </Layout>
   );
 };