formatting

src/components/MasonryGallery.tsx

@@ -56,7 +56,10 @@ const MasonryGallery = ({
   // );
 
   // const { breakpoint } = useBreakpoint(breakpoints, "sm");
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 46 ~ breakpoint", breakpoint)
+  console.log(
+    "🚀 ~ file: MasonryGallery.tsx ~ line 46 ~ breakpoint",
+    breakpoint
+  );
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images).filter(Boolean),
@@ -109,7 +112,6 @@ const MasonryGallery = ({
 
   let cursor = 0;
   return (
-    <>
     <div
       className="flex items-center flex-wrap sm:container mx-auto"
       ref={observe}
@@ -169,13 +171,13 @@ const MasonryGallery = ({
               <span className="text-white z-20 absolute bg-black">
                 hsl(
                 {image.fields?.imageMeta?.dominantHue?.[0]},{" "}
-                  {(
+                {(image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100).toFixed(
-                    image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100
+                  2
-                  ).toFixed(2)}
+                )}
                 %,{" "}
-                  {(
+                {(image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100).toFixed(
-                    image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100
+                  2
-                  ).toFixed(2)}
+                )}
                 % )
               </span>
             )}
@@ -196,7 +198,6 @@ const MasonryGallery = ({
         );
       })}
     </div>
-    </>
   );
 };