Feat: Implement mapbox for geocoding and location data for brewery posts

src/components/BeerById/BeerInfoHeader.tsx

@@ -10,9 +10,11 @@ import useGetBeerPostLikeCount from '@/hooks/useBeerPostLikeCount';
 import useTimeDistance from '@/hooks/useTimeDistance';
 import BeerPostLikeButton from './BeerPostLikeButton';
 
-const BeerInfoHeader: FC<{
+interface BeerInfoHeaderProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
-}> = ({ beerPost }) => {
+}
+
+const BeerInfoHeader: FC<BeerInfoHeaderProps> = ({ beerPost }) => {
   const createdAt = new Date(beerPost.createdAt);
   const timeDistance = useTimeDistance(createdAt);
 
@@ -23,21 +25,40 @@ const BeerInfoHeader: FC<{
   const { likeCount, mutate } = useGetBeerPostLikeCount(beerPost.id);
 
   return (
-    <main className="card flex flex-col justify-center bg-base-300">
-      <article className="card-body">
-        <div className="flex justify-between">
-          <header>
-            <h1 className="text-2xl font-bold lg:text-4xl">{beerPost.name}</h1>
-            <h2 className="text-lg font-semibold lg:text-2xl">
-              by{' '}
-              <Link
-                href={`/breweries/${beerPost.brewery.id}`}
-                className="link-hover link font-semibold"
-              >
-                {beerPost.brewery.name}
-              </Link>
-            </h2>
-          </header>
+    <article className="card flex flex-col justify-center bg-base-300">
+      <div className="card-body">
+        <header className="flex justify-between">
+          <div className="space-y-2">
+            <div>
+              <h1 className="text-2xl font-bold lg:text-4xl">{beerPost.name}</h1>
+              <h2 className="text-lg font-semibold lg:text-2xl">
+                by{' '}
+                <Link
+                  href={`/breweries/${beerPost.brewery.id}`}
+                  className="link-hover link font-semibold"
+                >
+                  {beerPost.brewery.name}
+                </Link>
+              </h2>
+            </div>
+            <div>
+              <h3 className="italic">
+                {' posted by '}
+                <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
+                  {`${beerPost.postedBy.username} `}
+                </Link>
+                {timeDistance && (
+                  <span
+                    className="tooltip tooltip-right"
+                    data-tip={format(createdAt, 'MM/dd/yyyy')}
+                  >
+                    {`${timeDistance} ago`}
+                  </span>
+                )}
+              </h3>
+            </div>
+          </div>
+
           {isPostOwner && (
             <div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
               <Link href={`/beers/${beerPost.id}/edit`} className="btn-ghost btn-xs btn">
@@ -45,52 +66,40 @@ const BeerInfoHeader: FC<{
               </Link>
             </div>
           )}
-        </div>
-
-        <h3 className="italic">
-          {' posted by '}
-          <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
-            {`${beerPost.postedBy.username} `}
-          </Link>
-          {timeDistance && (
-            <span
-              className="tooltip tooltip-right"
-              data-tip={format(createdAt, 'MM/dd/yyyy')}
-            >
-              {`${timeDistance} ago`}
-            </span>
-          )}
-        </h3>
-
-        <p>{beerPost.description}</p>
-        <div className="flex justify-between">
-          <div className="space-y-1">
-            <div>
-              <Link
-                className="link-hover link text-lg font-bold"
-                href={`/beers/types/${beerPost.type.id}`}
-              >
-                {beerPost.type.name}
-              </Link>
+        </header>
+        <div className="space-y-2">
+          <p>{beerPost.description}</p>
+          <div className="flex justify-between">
+            <div className="space-y-1">
+              <div>
+                <Link
+                  className="link-hover link text-lg font-bold"
+                  href={`/beers/types/${beerPost.type.id}`}
+                >
+                  {beerPost.type.name}
+                </Link>
+              </div>
+              <div>
+                <span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
+                <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
+              </div>
+              <div>
+                {(!!likeCount || likeCount === 0) && (
+                  <span>
+                    Liked by {likeCount} user{likeCount !== 1 && 's'}
+                  </span>
+                )}
+              </div>
             </div>
-            <div>
-              <span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
-              <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
-            </div>
-            <div>
-              {(!!likeCount || likeCount === 0) && (
-                <span>
-                  Liked by {likeCount} user{likeCount !== 1 && 's'}
-                </span>
+            <div className="card-actions items-end">
+              {user && (
+                <BeerPostLikeButton beerPostId={beerPost.id} mutateCount={mutate} />
               )}
             </div>
           </div>
-          <div className="card-actions items-end">
-            {user && <BeerPostLikeButton beerPostId={beerPost.id} mutateCount={mutate} />}
-          </div>
         </div>
-      </article>
-    </main>
+      </div>
+    </article>
   );
 };
 

src/components/BeerIndex/BeerCard.tsx

@@ -37,16 +37,16 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
             </h4>
           </Link>
         </div>
-        <div>
+        <div className="flex items-end justify-between">
           <div>
             <p className="text-md lg:text-xl">{post.type.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>
             </div>
-          </div>
-          <div className="flex justify-between">
             <span>liked by {likeCount} users</span>
+          </div>
+          <div>
             {user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
           </div>
         </div>

src/components/BreweryIndex/BreweryCard.tsx

@@ -32,7 +32,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
             </Link>
           </h2>
           <h3 className="text-xl font-normal lg:text-2xl">
-            located in {brewery.location}
+            located in {brewery.city}, {brewery.stateOrProvince || brewery.country}
           </h3>
           <h4 className="text-lg lg:text-xl">
             est. {brewery.dateEstablished.getFullYear()}