Update: more work on beer styles, add erd to readme

src/components/BeerStyle/BeerStyleCard.tsx

@@ -8,24 +8,37 @@ const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = (
   beerStyle,
 }) => {
   return (
-    <div className="card card-compact bg-base-300" key={beerStyle.id}>
+    <div className="card card-compact bg-base-300">
       <div className="card-body justify-between">
         <div className="space-y-1">
           <Link href={`/beers/types/${beerStyle.id}`}>
             <h3 className="link-hover link overflow-hidden whitespace-normal text-2xl font-bold lg:truncate lg:text-3xl">
               {beerStyle.name}
             </h3>
-            <div className="text-base-content text-sm">
-              ABV Range: <span>{beerStyle.abvRange[0].toFixed(1)}%</span>
-              <span> - </span>
-              <span>{beerStyle.abvRange[1].toFixed(1)}%</span>
-            </div>
-            <div className="text-base-content text-sm">
-              IBU Range: <span>{beerStyle.ibuRange[0].toFixed(1)}</span>
-              <span> - </span>
-              <span>{beerStyle.ibuRange[1].toFixed(1)}</span>
-            </div>
           </Link>
+          <div className="flex w-25 space-x-3 flex-row">
+            <div className="text-sm font-bold">
+              ABV Range:{' '}
+              <span>
+                {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[1].toFixed(1)}%
+              </span>
+            </div>
+            <div className="text-sm font-bold">
+              IBU Range:{' '}
+              <span>
+                {beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
+              </span>
+            </div>
+          </div>
+
+          <div>
+            <p>{beerStyle.description}</p>
+          </div>
+
+          <div className="font-semibold">
+            Recommended Glassware:{' '}
+            <span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
+          </div>
         </div>
       </div>
     </div>

src/components/ui/SmLoadingCard.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+const SMLoadingCard: FC = () => {
+  return (
+    <div className="card bg-base-300">
+      <div className="card-body h-52">
+        <div className="flex animate-pulse space-x-4">
+          <div className="flex-1 space-y-4 py-1">
+            <div className="h-4 w-3/4 rounded bg-base-100" />
+            <div className="space-y-2">
+              <div className="h-4 rounded bg-base-100" />
+              <div className="h-4 w-5/6 rounded bg-base-100" />
+              <div className="h-4 w-5/6 rounded bg-base-100" />
+              <div className="h-4 rounded bg-base-100" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SMLoadingCard;

src/pages/beers/styles/index.tsx

@@ -1,14 +1,14 @@
-import BeerStyleCard from '@/components/BeerStyle/BeerStyleCard';
-import LoadingCard from '@/components/ui/LoadingCard';
-import Spinner from '@/components/ui/Spinner';
-import useBeerStyles from '@/hooks/data-fetching/beer-styles/useBeerStyles';
-
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { MutableRefObject, useRef } from 'react';
 import { FaArrowUp } from 'react-icons/fa';
 import { useInView } from 'react-intersection-observer';
 
+import BeerStyleCard from '@/components/BeerStyle/BeerStyleCard';
+import SmLoadingCard from '@/components/ui/SmLoadingCard';
+import Spinner from '@/components/ui/Spinner';
+import useBeerStyles from '@/hooks/data-fetching/beer-styles/useBeerStyles';
+
 const BeerStylePage: NextPage = () => {
   const PAGE_SIZE = 20;
   const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
@@ -17,7 +17,6 @@ const BeerStylePage: NextPage = () => {
     pageSize: PAGE_SIZE,
   });
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { ref: lastBeerStyleRef } = useInView({
     onChange: (visible) => {
       if (!visible || isAtEnd) return;
@@ -28,7 +27,7 @@ const BeerStylePage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Beer Types | The Biergarten App</title>
+        <title>Beer Styles | The Biergarten App</title>
         <meta
           name="description"
           content="Find beers made by breweries near you and around the world."
@@ -60,7 +59,7 @@ const BeerStylePage: NextPage = () => {
             {(isLoading || isLoadingMore) && (
               <>
                 {Array.from({ length: PAGE_SIZE }, (_, i) => (
-                  <LoadingCard key={i} />
+                  <SmLoadingCard key={i} />
                 ))}
               </>
             )}

src/services/BeerStyles/getAllBeerStyles.ts

@@ -17,6 +17,8 @@ const getAllBeerStyles = async (
       updatedAt: true,
       abvRange: true,
       ibuRange: true,
+      description: true,
+      glassware: { select: { id: true, name: true } },
     },
   })) as z.infer<typeof BeerStyleQueryResult>[];
 

src/services/BeerStyles/schema/BeerStyleQueryResult.ts

@@ -1,16 +1,15 @@
 import { z } from 'zod';
 
 const BeerStyleQueryResult = z.object({
+  abvRange: z.tuple([z.number(), z.number()]),
+  createdAt: z.coerce.date(),
+  description: z.string(),
+  glassware: z.object({ id: z.string().cuid(), name: z.string() }),
+  ibuRange: z.tuple([z.number(), z.number()]),
   id: z.string().cuid(),
   name: z.string(),
-  postedBy: z.object({
-    id: z.string().cuid(),
-    username: z.string(),
-  }),
-  createdAt: z.coerce.date(),
+  postedBy: z.object({ id: z.string().cuid(), username: z.string() }),
   updatedAt: z.coerce.date().nullable(),
-  abvRange: z.tuple([z.number(), z.number()]),
-  ibuRange: z.tuple([z.number(), z.number()]),
 });
 
 export default BeerStyleQueryResult;