Refactor beer comment section and incorporate image carousel

Beer comment section now uses a ternary expression for isLoading. Image carousel implemented in beer by id page.

pages/beers/[id]/index.tsx

@@ -15,6 +15,9 @@ import { BeerPost } from '@prisma/client';
 
 import { z } from 'zod';
 
+import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
+import { Carousel } from 'react-responsive-carousel';
+
 interface BeerPageProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
   beerRecommendations: (BeerPost & {
@@ -32,17 +35,28 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
       </Head>
       <Layout>
         <div>
-          {beerPost.beerImages[0] && (
-            <Image
-              alt={beerPost.beerImages[0].alt}
-              src={beerPost.beerImages[0].path}
-              height={1080}
-              width={1920}
-              className="h-[42rem] w-full object-cover"
-            />
-          )}
+          <Carousel
+            className="w-full"
+            useKeyboardArrows
+            autoPlay
+            interval={10000}
+            infiniteLoop
+            showThumbs={false}
+          >
+            {beerPost.beerImages.map((image, index) => (
+              <div key={image.id} id={`image-${index}}`} className="w-full">
+                <Image
+                  alt={image.alt}
+                  src={image.path}
+                  height={1080}
+                  width={1920}
+                  className="h-[42rem] w-full object-cover"
+                />
+              </div>
+            ))}
+          </Carousel>
 
-          <div className="my-12 flex w-full items-center justify-center ">
+          <div className="mb-12 mt-10 flex w-full items-center justify-center ">
             <div className="w-11/12 space-y-3 xl:w-9/12">
               <BeerInfoHeader beerPost={beerPost} />
               <div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0">

pages/beers/index.tsx

@@ -9,6 +9,9 @@ import BeerCard from '@/components/BeerIndex/BeerCard';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import Head from 'next/head';
 import { z } from 'zod';
+import Link from 'next/link';
+import UserContext from '@/contexts/userContext';
+import { useContext } from 'react';
 
 interface BeerPageProps {
   initialBeerPosts: z.infer<typeof beerPostQueryResult>[];
@@ -19,6 +22,8 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
   const router = useRouter();
   const { query } = router;
 
+  const { user } = useContext(UserContext);
+
   const pageNum = parseInt(query.page_num as string, 10) || 1;
   return (
     <Layout>
@@ -28,13 +33,20 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
       </Head>
       <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">
+          <header className="my-10 flex justify-between">
             <div className="space-y-2">
               <h1 className="text-6xl font-bold">The Biergarten Index</h1>
               <h2 className="text-2xl font-bold">
                 Page {pageNum} of {pageCount}
               </h2>
             </div>
+            {!!user && (
+              <div>
+                <Link href="/beers/create" className="btn-primary btn">
+                  Create a new beer post
+                </Link>
+              </div>
+            )}
           </header>
           <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
             {initialBeerPosts.map((post) => {