feat: display profile picture

apps/web/src/components/Avatar.tsx

@@ -1,47 +1,71 @@
+import Image from "next/image";
 import { twMerge } from "tailwind-merge";
 
 import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";
 
+const sizeMap = {
+  xs: 20,
+  sm: 24,
+  md: 36,
+  lg: 48,
+} as const;
+
 const Avatar = ({
   size = "md",
   name,
   email,
   icon,
+  imageUrl,
   isLoading,
 }: {
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   name: string;
   email: string;
+  imageUrl?: string;
   icon?: React.ReactNode;
-  isLoading: boolean;
+  isLoading?: boolean;
 }) => {
   const initials = name
     ? getInitialsFromName(name)
     : inferInitialsFromEmail(email ?? "");
 
   return (
-    <span
-      className={twMerge(
-        "inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
-        isLoading && "animate-pulse bg-light-200 dark:bg-dark-200",
-        size === "sm" && "h-6 w-6",
-        size === "lg" && "h-12 w-12",
-      )}
-    >
-      {icon ? (
-        <span className="text-[12px] text-white">{icon}</span>
+    <>
+      {imageUrl ? (
+        <Image
+          src={imageUrl}
+          className="rounded-full bg-gray-50"
+          width={sizeMap[size]}
+          height={sizeMap[size]}
+          alt=""
+        />
       ) : (
         <span
           className={twMerge(
-            "text-sm font-medium leading-none text-white",
-            size === "sm" && "text-[10px]",
-            size === "lg" && "text-md",
+            "inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
+            isLoading && "animate-pulse bg-light-200 dark:bg-dark-200",
+            size === "xs" && "h-5 w-5",
+            size === "sm" && "h-6 w-6",
+            size === "lg" && "h-12 w-12",
           )}
         >
-          {initials}
+          {icon ? (
+            <span className="text-[12px] text-white">{icon}</span>
+          ) : (
+            <span
+              className={twMerge(
+                "text-sm font-medium leading-none text-white",
+                size === "xs" && "text-[8px]",
+                size === "sm" && "text-[10px]",
+                size === "lg" && "text-md",
+              )}
+            >
+              {initials}
+            </span>
+          )}
         </span>
       )}
-    </span>
+    </>
   );
 };