misc: Rename beer type to beer style

src/components/BeerById/BeerInfoHeader.tsx

@@ -74,9 +74,9 @@ const BeerInfoHeader: FC<BeerInfoHeaderProps> = ({ beerPost }) => {
               <div>
                 <Link
                   className="link-hover link text-lg font-bold"
-                  href={`/beers/types/${beerPost.type.id}`}
+                  href={`/beers/types/${beerPost.style.id}`}
                 >
-                  {beerPost.type.name}
+                  {beerPost.style.name}
                 </Link>
               </div>
               <div>

src/components/BeerById/BeerRecommendations.tsx

@@ -70,7 +70,7 @@ const BeerRecommendationsSection: FC<{
 
                     <div>
                       <div>
-                        <span className="text-lg font-medium">{post.type.name}</span>
+                        <span className="text-lg font-medium">{post.style.name}</span>
                       </div>
                       <div className="space-x-2">
                         <span>{post.abv}% ABV</span>

src/components/BeerIndex/BeerCard.tsx

@@ -39,7 +39,7 @@ const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) =
         </div>
         <div className="flex items-end justify-between">
           <div>
-            <p className="text-md lg:text-xl">{post.type.name}</p>
+            <p className="text-md lg:text-xl">{post.style.name}</p>
             <div className="space-x-3">
               <span className="text-sm lg:text-lg">{post.abv}% ABV</span>
               <span className="text-sm lg:text-lg">{post.ibu} IBU</span>

src/components/BeerStyle/BeerStyleCard.tsx

@@ -0,0 +1,25 @@
+import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult';
+import Link from 'next/link';
+import { FC } from 'react';
+
+import { z } from 'zod';
+
+const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = ({
+  beerStyle,
+}) => {
+  return (
+    <div className="card card-compact bg-base-300" key={beerStyle.id}>
+      <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>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BeerStyleCard;

src/components/BreweryById/BreweryBeerSection.tsx

@@ -76,7 +76,7 @@ const BreweryBeersSection: FC<BreweryCommentsSectionProps> = ({ breweryPost }) =
                     </div>
 
                     <div>
-                      <span className="text-lg font-medium">{beerPost.type.name}</span>
+                      <span className="text-lg font-medium">{beerPost.style.name}</span>
                     </div>
                     <div className="space-x-2">
                       <span>{beerPost.abv}% ABV</span>

src/components/CreateBeerPostForm.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { BeerType } from '@prisma/client';
+import { BeerStyle } from '@prisma/client';
 import router from 'next/router';
 import { FunctionComponent } from 'react';
 import { useForm, SubmitHandler, FieldError } from 'react-hook-form';
@@ -23,7 +23,7 @@ import FormTextInput from './ui/forms/FormTextInput';
 
 interface BeerFormProps {
   brewery: z.infer<typeof BreweryPostQueryResult>;
-  types: BeerType[];
+  styles: BeerStyle[];
 }
 
 const CreateBeerPostWithImagesValidationSchema = CreateBeerPostValidationSchema.merge(
@@ -31,7 +31,7 @@ const CreateBeerPostWithImagesValidationSchema = CreateBeerPostValidationSchema.
 );
 
 const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
-  types = [],
+  styles = [],
   brewery,
 }) => {
   const {
@@ -80,21 +80,21 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
       </FormSegment>
 
       <FormInfo>
-        <FormLabel htmlFor="typeId">Type</FormLabel>
-        <FormError>{errors.typeId?.message}</FormError>
+        <FormLabel htmlFor="typeId">Style</FormLabel>
+        <FormError>{errors.styleId?.message}</FormError>
       </FormInfo>
       <FormSegment>
         <FormSelect
           disabled={isSubmitting}
-          formRegister={register('typeId')}
-          error={!!errors.typeId}
-          id="typeId"
-          options={types.map((beerType) => ({
-            value: beerType.id,
-            text: beerType.name,
+          formRegister={register('styleId')}
+          error={!!errors.styleId}
+          id="styleId"
+          options={styles.map((style) => ({
+            value: style.id,
+            text: style.name,
           }))}
-          placeholder="Beer type"
-          message="Pick a beer type"
+          placeholder="Beer style"
+          message="Pick a beer style"
         />
       </FormSegment>