many more improvements

components/ImageWithFallback.tsx

@@ -0,0 +1,27 @@
+import { ElementType, ReactElement, ReactNode, useState } from "react";
+
+type Props = {
+  src: string;
+  className: string;
+  children: ReactNode;
+};
+
+const ImageWithFallback = ({ src, className, children, ...rest }: Props) => {
+  const [error, setError] = useState(false);
+
+  return error ? (
+    <>{children}</>
+  ) : (
+    <img
+      alt=""
+      {...rest}
+      src={src}
+      className={className}
+      onError={() => {
+        setError(true);
+      }}
+    />
+  );
+};
+
+export default ImageWithFallback;