Styling changes and refactor

Switch google fonts to use Next.js font optimization, animate comment fade in, and refactor beer like handler and comment submit handler.

components/BeerById/BeerPostCommentsPaginationBar.tsx

@@ -3,6 +3,8 @@ import Link from 'next/link';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';
 
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+
 interface BeerCommentsPaginationBarProps {
   commentsPageNum: number;
   commentsPageCount: number;
@@ -15,9 +17,9 @@ const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({
   beerPost,
 }) => (
   <div className="flex items-center justify-center" id="comments-pagination">
-    <div className="btn-group grid w-6/12 grid-cols-2">
+    <div className="btn-group">
       <Link
-        className={`btn-outline btn ${
+        className={`btn btn-ghost ${
           commentsPageNum === 1
             ? 'btn-disabled pointer-events-none'
             : 'pointer-events-auto'
@@ -28,10 +30,11 @@ const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({
         }}
         scroll={false}
       >
-        Next Comments
+        <FaArrowLeft />
       </Link>
+      <button className="btn btn-ghost pointer-events-none">{commentsPageNum}</button>
       <Link
-        className={`btn-outline btn ${
+        className={`btn btn-ghost ${
           commentsPageNum === commentsPageCount
             ? 'btn-disabled pointer-events-none'
             : 'pointer-events-auto'
@@ -42,7 +45,7 @@ const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({
         }}
         scroll={false}
       >
-        Previous Comments
+        <FaArrowRight />
       </Link>
     </div>
   </div>