navbar UI improved

components/ProfilePhoto.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import ImageWithFallback from "./ImageWithFallback";
+import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 
@@ -9,16 +8,26 @@ type Props = {
 };
 
 export default function ProfilePhoto({ src, className }: Props) {
-  return (
-    <ImageWithFallback
-      src={src}
-      className={`h-10 w-10 shadow rounded-full border-[3px] border-sky-100 ${className}`}
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    console.log(src);
+  }, []);
+
+  return error || !src ? (
+    <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}`}
     >
-      <div
-        className={`bg-sky-500 text-white h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center ${className}`}
-      >
-        <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
-      </div>
-    </ImageWithFallback>
+      <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+    </div>
+  ) : (
+    <img
+      alt=""
+      src={src}
+      className={`h-10 w-10 shadow rounded-full border-[3px] border-slate-200 ${className}`}
+      onError={() => {
+        setError(true);
+      }}
+    />
   );
 }