37 lines
953 B
TypeScript
37 lines
953 B
TypeScript
import { useAuth } from "@/store/auth";
|
|
import { User } from "lucide-react";
|
|
import { useMemo, type FC } from "react";
|
|
|
|
export interface AvatarProps {
|
|
iconSize?: number;
|
|
className?: string;
|
|
avatarId?: string;
|
|
}
|
|
|
|
const Avatar: FC<AvatarProps> = ({ iconSize = 32, className, avatarId }) => {
|
|
const profile = useAuth((state) => state.profile);
|
|
|
|
const avatar = useMemo(
|
|
() => (avatarId !== undefined ? avatarId : profile?.profile_picture),
|
|
[avatarId, profile?.profile_picture],
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
|
|
>
|
|
{avatar ? (
|
|
<img
|
|
src={`/api/v1/avatar/${avatar?.toString()}`}
|
|
className="w-full h-full flex-1 object-cover"
|
|
alt="profile"
|
|
/>
|
|
) : (
|
|
<User size={iconSize} />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Avatar;
|