feat: add <Image/>

web/src/app/_components/image.tsx

@@ -0,0 +1,73 @@
+import { memo, useCallback, useEffect, useState } from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
+import { cn } from "~/lib/utils";
+
+function Image({
+  className,
+  imageClassName,
+  imageTransition,
+  src,
+  alt,
+  fallback = null,
+}: {
+  className?: string;
+  imageClassName?: string;
+  imageTransition?: boolean;
+  src: string;
+  alt: string;
+  fallback?: React.ReactNode;
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    setIsError(false);
+    setIsLoading(true);
+  }, [src]);
+
+  const handleLoad = useCallback(() => {
+    setIsError(false);
+    setIsLoading(false);
+  }, []);
+  const handleError = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement>) => {
+      e.currentTarget.style.display = "none";
+      console.warn(`Markdown: Image "${e.currentTarget.src}" failed to load`);
+      setIsError(true);
+    },
+    [],
+  );
+  return (
+    <span className={cn("block w-fit overflow-hidden", className)}>
+      {isError ? (
+        fallback
+      ) : (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <img
+              className={cn(
+                "size-full object-cover",
+                imageTransition && "transition-all duration-200 ease-out",
+                imageClassName,
+              )}
+              src={src}
+              alt={alt}
+              onLoad={handleLoad}
+              onError={handleError}
+            />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p className="max-w-64 text-sm">{alt ?? "No caption"}</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </span>
+  );
+}
+
+export default memo(Image);