refactor: eslint/prettier ➡️ biome

components/image-diff.tsx

@@ -1,21 +1,33 @@
 "use client";
 
-import { Children } from "react";
 import { getImageProps } from "next/image";
-import { ReactCompareSlider, ReactCompareSliderImage } from "react-compare-slider";
+import { Children } from "react";
+import {
+  ReactCompareSlider,
+  ReactCompareSliderImage,
+} from "react-compare-slider";
 import { cn } from "@/lib/utils";
 
-const ImageDiff = ({ children, className }: { children: React.ReactElement[]; className?: string }) => {
+const ImageDiff = ({
+  children,
+  className,
+}: {
+  children: React.ReactElement[];
+  className?: string;
+}) => {
   // Extract the two image children
   const childrenArray = Children.toArray(children);
   if (childrenArray.length !== 2) {
-    console.error("ImageDiff must have exactly two children (before and after images)");
+    console.error(
+      "ImageDiff must have exactly two children (before and after images)",
+    );
     return null;
   }
 
   // Get the original image source to extract dimensions for aspect ratio
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const firstChildProps = children[0].props as any;
+  const firstChildProps = children[0].props as Parameters<
+    typeof getImageProps
+  >[0];
   const imageSrc = firstChildProps.src;
   const aspectRatio =
     typeof imageSrc === "object" && "width" in imageSrc && "height" in imageSrc
@@ -24,15 +36,29 @@ const ImageDiff = ({ children, className }: { children: React.ReactElement[]; cl
 
   // Extract image props, stripping out MDX className (margins, etc.) that would break slider layout
   const beforeImageProps = getImageProps(firstChildProps).props;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const afterImageProps = getImageProps(children[1].props as any).props;
+  const afterImageProps = getImageProps(
+    children[1].props as Parameters<typeof getImageProps>[0],
+  ).props;
 
   return (
     <ReactCompareSlider
-      className={cn("my-8 w-full max-w-full overflow-hidden rounded-sm", className)}
+      className={cn(
+        "my-8 w-full max-w-full overflow-hidden rounded-sm",
+        className,
+      )}
       style={{ aspectRatio }}
-      itemOne={<ReactCompareSliderImage {...beforeImageProps} className="size-full object-cover" />}
-      itemTwo={<ReactCompareSliderImage {...afterImageProps} className="size-full object-cover" />}
+      itemOne={
+        <ReactCompareSliderImage
+          {...beforeImageProps}
+          className="size-full object-cover"
+        />
+      }
+      itemTwo={
+        <ReactCompareSliderImage
+          {...afterImageProps}
+          className="size-full object-cover"
+        />
+      }
     />
   );
 };