Allow users to set profile pictures

src/Components/Common/Avatar.tsx

@@ -1,7 +1,5 @@
-import CareIcon from "@/CAREUI/icons/CareIcon";
 import { cn } from "@/lib/utils";
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 const colors: string[] = [
   "#E6F3FF", // Light Blue
@@ -52,11 +50,6 @@ interface AvatarProps {
   className?: string;
 }
 
-interface EditableAvatarProps extends AvatarProps {
-  editable?: boolean;
-  onClick?: () => void;
-}
-
 const Avatar: React.FC<AvatarProps> = ({
   id,
   colors: propColors,
@@ -108,46 +101,5 @@ const Avatar: React.FC<AvatarProps> = ({
   );
 };
 
-const EditableAvatar: React.FC<EditableAvatarProps> = ({
-  id,
-  colors: propColors,
-  name,
-  imageUrl,
-  className,
-  editable = true,
-  onClick,
-}) => {
-  const { t } = useTranslation();
-  return (
-    <div
-      id={id}
-      className={cn(
-        `group grid aspect-square h-full w-full place-items-center text-clip transition-all duration-200 ease-in-out [grid-template-areas:'stack']`,
-        editable && "cursor-pointer",
-        className,
-      )}
-    >
-      <Avatar
-        imageUrl={imageUrl}
-        name={name}
-        colors={propColors}
-        className="flex h-full w-full [grid-area:stack]"
-      />
-
-      {editable && (
-        <div
-          className={
-            "flex h-full w-full cursor-pointer flex-col items-center justify-center bg-black text-sm text-secondary-300 opacity-0 transition-opacity [grid-area:stack] hover:opacity-60"
-          }
-          style={{ borderRadius: "calc(100% / 15)" }}
-          onClick={onClick}
-        >
-          <CareIcon icon="l-pen" className="text-lg" />
-          <span className="mt-2">{t(imageUrl ? "edit" : "upload")}</span>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export { Avatar, EditableAvatar };
+export { Avatar };
+export type { AvatarProps };

src/Components/Common/AvatarEditable.tsx

@@ -0,0 +1,53 @@
+import CareIcon from "@/CAREUI/icons/CareIcon";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+import { AvatarProps, Avatar } from "@/Components/Common/Avatar";
+
+interface AvatarEditableProps extends AvatarProps {
+  editable?: boolean;
+  onClick?: () => void;
+}
+
+const AvatarEditable: React.FC<AvatarEditableProps> = ({
+  id,
+  colors: propColors,
+  name,
+  imageUrl,
+  className,
+  editable = true,
+  onClick,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div
+      id={id}
+      className={cn(
+        `group grid aspect-square h-full w-full place-items-center text-clip transition-all duration-200 ease-in-out [grid-template-areas:'stack']`,
+        editable && "cursor-pointer",
+        className,
+      )}
+    >
+      <Avatar
+        imageUrl={imageUrl}
+        name={name}
+        colors={propColors}
+        className="flex h-full w-full [grid-area:stack]"
+      />
+
+      {editable && (
+        <div
+          className={
+            "flex h-full w-full cursor-pointer flex-col items-center justify-center bg-black text-sm text-secondary-300 opacity-0 transition-opacity [grid-area:stack] hover:opacity-60"
+          }
+          style={{ borderRadius: "calc(100% / 15)" }}
+          onClick={onClick}
+        >
+          <CareIcon icon="l-pen" className="text-lg" />
+          <span className="mt-2">{t(imageUrl ? "edit" : "upload")}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { AvatarEditable };

src/Components/Facility/FacilityHome.tsx

@@ -40,7 +40,7 @@ import { CameraFeedPermittedUserTypes } from "../../Utils/permissions.js";
 import { FacilityStaffList } from "./FacilityStaffList.js";
 import FacilityBlock from "./FacilityBlock.js";
 import Loading from "@/Components/Common/Loading";
-import { EditableAvatar } from "@/Components/Common/Avatar";
+import { AvatarEditable } from "@/Components/Common/AvatarEditable";
 import AvatarEditModal from "@/Components/Common/AvatarEditModal";
 import careConfig from "@careConfig";
 import uploadFile from "@/Utils/request/uploadFile";
@@ -201,7 +201,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
           <div className="flex-col justify-between md:flex">
             <div className="flex flex-1 flex-col">
               <div className="flex flex-col items-start gap-4 md:flex-row">
-                <EditableAvatar
+                <AvatarEditable
                   id="facility-coverimage"
                   imageUrl={facilityData?.read_cover_image_url}
                   name={facilityData?.name ?? ""}

src/Components/Users/UserProfile.tsx

@@ -29,7 +29,7 @@ import request from "../../Utils/request/request";
 import DateFormField from "../Form/FormFields/DateFormField";
 import { validateRule } from "./UserAdd";
 import { useTranslation } from "react-i18next";
-import { EditableAvatar } from "@/Components/Common/Avatar";
+import { AvatarEditable } from "@/Components/Common/AvatarEditable";
 import Page from "@/Components/Common/components/Page";
 import Loading from "@/Components/Common/Loading";
 import AvatarEditModal from "@/Components/Common/AvatarEditModal";
@@ -534,7 +534,7 @@ export default function UserProfile() {
             {t("are_non_editable_fields")}.
           </p>
           <div className="my-4 flex items-center">
-            <EditableAvatar
+            <AvatarEditable
               id="user-profile-picture"
               imageUrl={authUser?.read_profile_picture_url}
               name={formatDisplayName(authUser)}