60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { getInitials } from "./functions/getInitials";
|
|
import { getAvatarColor } from "./functions/getAvatarColor";
|
|
|
|
interface AvatarProps {
|
|
name: string; // Name can be a full name or initials
|
|
size?: number;
|
|
textColor?: string;
|
|
color?: string; // Optional color prop for future use
|
|
}
|
|
|
|
const CustomAvatar: React.FC<AvatarProps> = ({
|
|
name,
|
|
size = 100,
|
|
textColor = "#ffffff",
|
|
color, // Optional color prop for future use
|
|
}) => {
|
|
const [imageSrc, setImageSrc] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const canvas = document.createElement("canvas"); // Create an offscreen canvas
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
const ctx = canvas.getContext("2d");
|
|
if (ctx) {
|
|
const initials = getInitials(name); // Convert name to initials if needed
|
|
|
|
// Draw background
|
|
ctx.fillStyle = color || "#323232"; // Use color prop or generate color based on index
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
// Draw initials
|
|
ctx.fillStyle = textColor;
|
|
ctx.font = `bold ${size / 2}px Arial`;
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillText(initials, size / 2, size / 2);
|
|
|
|
// Generate image source
|
|
const dataURL = canvas.toDataURL("image/png");
|
|
setImageSrc(dataURL);
|
|
}
|
|
}, [name, size, textColor]);
|
|
|
|
if (!imageSrc) {
|
|
return null; // Return null while the image is being generated
|
|
}
|
|
|
|
return (
|
|
<img
|
|
className="user-image"
|
|
src={imageSrc}
|
|
alt="User Avatar"
|
|
style={{ width: "100%", height: "100%" }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default CustomAvatar;
|