tab-seperated modals + eslint fix + much more bug fixed and improvements

components/ProfilePhoto.tsx

@@ -1,33 +1,41 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
+import Image from "next/image";
+import avatarExists from "@/lib/client/avatarExists";
 
 type Props = {
   src: string;
   className?: string;
+  emptyImage?: boolean;
 };
 
-export default function ProfilePhoto({ src, className }: Props) {
-  const [error, setError] = useState(false);
+export default function ProfilePhoto({ src, className, emptyImage }: Props) {
+  const [error, setError] = useState<boolean>(emptyImage || true);
+
+  const checkAvatarExistence = async () => {
+    const canPass = await avatarExists(src);
+
+    setError(!canPass);
+  };
 
   useEffect(() => {
-    setError(false);
+    if (src) checkAvatarExistence();
   }, [src]);
 
-  return error || !src ? (
+  return error ? (
     <div
       className={`bg-sky-500 text-white h-10 w-10 shadow rounded-full border-[3px] border-slate-200 flex items-center justify-center ${className}`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2" />
     </div>
   ) : (
-    <img
-      alt=""
+    <Image
+      alt="Avatar"
       src={src}
+      height={112}
+      width={112}
       className={`h-10 w-10 shadow rounded-full border-[3px] border-slate-200 ${className}`}
-      onError={() => {
-        setError(true);
-      }}
     />
   );
 }