Refactor: switch data fetching from server side to client

src/components/BeerIndex/BeerCard.tsx

@@ -51,7 +51,9 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
             )}
           </div>
           <div>
-            {!!user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
+            {!!user && !isLoading && (
+              <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />
+            )}
           </div>
         </div>
       </div>

src/components/BreweryById/BreweryPostMap.tsx

@@ -4,6 +4,7 @@ import { FC, useMemo } from 'react';
 import Map, { Marker } from 'react-map-gl';
 
 import LocationMarker from '../ui/LocationMarker';
+import ControlPanel from '../ui/maps/ControlPanel';
 
 interface BreweryMapProps {
   latitude: number;
@@ -45,6 +46,7 @@ const BreweryPostMap: FC<BreweryMapProps> = ({ latitude, longitude }) => {
           mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN as string}
           scrollZoom
         >
+          <ControlPanel />
           {pin}
         </Map>
       </div>

src/components/BreweryIndex/BreweryCard.tsx

@@ -41,7 +41,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
         </div>
         <div className="flex justify-between">
           {!isLoading && <span>liked by {likeCount} users</span>}
-          {user && (
+          {!!user && !isLoading && (
             <BreweryPostLikeButton breweryPostId={brewery.id} mutateCount={mutate} />
           )}
         </div>

src/components/ui/LocationMarker.tsx

@@ -7,14 +7,14 @@ interface LocationMarkerProps {
 }
 
 const sizeClasses: Record<NonNullable<LocationMarkerProps['size']>, `text-${string}`> = {
-  sm: 'text-2xl',
-  md: 'text-3xl',
-  lg: 'text-4xl',
-  xl: 'text-5xl',
+  sm: 'text-lg',
+  md: 'text-xl',
+  lg: 'text-2xl',
+  xl: 'text-3xl',
 };
 
 const LocationMarker: FC<LocationMarkerProps> = ({ size = 'md', color = 'blue' }) => {
-  return <HiLocationMarker className={`${sizeClasses[size]} text-${color}-400`} />;
+  return <HiLocationMarker className={`${sizeClasses[size]} text-${color}-600`} />;
 };
 
 export default React.memo(LocationMarker);

src/components/ui/maps/ControlPanel.tsx

@@ -0,0 +1,12 @@
+import { FC, memo } from 'react';
+import { FullscreenControl, NavigationControl, ScaleControl } from 'react-map-gl';
+
+const ControlPanel: FC = () => (
+  <>
+    <FullscreenControl position="top-left" />
+    <NavigationControl position="top-left" />
+    <ScaleControl />
+  </>
+);
+
+export default memo(ControlPanel);