Skip to content

Commit

Permalink
Allow users to set profile pictures
Browse files Browse the repository at this point in the history
Co-authored-by: Uday Sagar <[email protected]>
  • Loading branch information
sainak and UdaySagar-Git committed Oct 21, 2024
1 parent 5c39b2c commit 9eb78a4
Show file tree
Hide file tree
Showing 16 changed files with 1,076 additions and 1,038 deletions.
1 change: 1 addition & 0 deletions src/Common/hooks/useAuthUser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type AuthContextType = {
user: UserModel | undefined;
signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
signOut: () => Promise<void>;
refetchUser: () => Promise<RequestResult<UserModel>>;
};

export const AuthUserContext = createContext<AuthContextType | null>(null);
Expand Down
98 changes: 76 additions & 22 deletions src/Components/Common/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import CareIcon from "@/CAREUI/icons/CareIcon";
import { cn } from "@/lib/utils";
import React, { useEffect, useRef, useState } from "react";
import React from "react";
import { useTranslation } from "react-i18next";

const colors: string[] = [
"#E6F3FF", // Light Blue
Expand Down Expand Up @@ -43,57 +45,109 @@ const initials = (name: string): string => {
};

interface AvatarProps {
id?: string;
colors?: [string, string];
name: string;
imageUrl?: string;
className?: string;
}

interface EditableAvatarProps extends AvatarProps {
editable?: boolean;
onClick?: () => void;
}

const Avatar: React.FC<AvatarProps> = ({
id,
colors: propColors,
name,
imageUrl,
className,
}) => {
const [bgColor] = propColors || toColor(name);
const [width, setWidth] = useState(0);
const avatarRef = useRef<HTMLDivElement>(null);

useEffect(() => {
const updateWidth = () => {
const avatarRect = avatarRef.current?.getBoundingClientRect();
const width = avatarRect?.width || 0;
setWidth(width);
};
updateWidth();
document.addEventListener("resize", updateWidth);
return () => document.removeEventListener("resize", updateWidth);
}, []);

return (
<div
ref={avatarRef}
id={id}
className={cn(
`flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10 font-black text-black/10`,
`flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10`,
className,
)}
style={{
background: bgColor,
borderRadius: width / 15 + "px",
fontSize: width / 2.5 + "px",
borderRadius: "calc(100% / 15)",
}}
>
{imageUrl ? (
<img
src={imageUrl}
alt={name}
className="aspect-square w-full object-cover"
className="aspect-square h-full w-full object-cover"
/>
) : (
<div>{initials(name)}</div>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100"
>
<text
fill="black"
fillOpacity="0.1"
fontSize="40"
fontWeight="900"
x="50"
y="54"
textAnchor="middle"
dominantBaseline="middle"
alignmentBaseline="middle"
>
{initials(name)}
</text>
</svg>
)}
</div>
);
};

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 };
export { Avatar, EditableAvatar };
Loading

0 comments on commit 9eb78a4

Please sign in to comment.