react-avatar-gradient
Version:
A customizable React component for creating avatars with dynamic gradients and initials.
54 lines (53 loc) • 1.68 kB
JavaScript
import React, { useMemo } from "react";
var pastelColors = [
"#FCDBDB",
"#F5E8F1",
"#F0F9F4",
"#A6D8FF",
"#E6F6EA",
"#FFEBE0",
"#B8F1D4",
"#C1F8E1",
"#FFF8E1",
"#FDF7E4",
"#A2D9F7",
"#C6A9F9",
"#FFCCCC",
"#FFF9C4",
"#F5F8F0",
"#F6F8D4",
"#FFE0D5",
];
var getRandomGradient = function () {
var color1 = pastelColors[Math.floor(Math.random() * pastelColors.length)];
var color2 = pastelColors[Math.floor(Math.random() * pastelColors.length)];
while (color1 === color2) {
color2 = pastelColors[Math.floor(Math.random() * pastelColors.length)];
}
return "linear-gradient(135deg, ".concat(color1, ", ").concat(color2, ")");
};
export var Avatar = function (_a) {
var title = _a.title, _b = _a.size, size = _b === void 0 ? 40 : _b, _c = _a.shape, shape = _c === void 0 ? "circle" : _c, color = _a.color;
var background = useMemo(function () { return color || getRandomGradient(); }, [color]);
var initials = useMemo(function () {
return title
.split(" ")
.map(function (word) { return word[0]; })
.join("")
.slice(0, 2)
.toUpperCase();
}, [title]);
return (React.createElement("div", { style: {
background: background,
width: size,
height: size,
borderRadius: shape === "circle" ? "50%" : "5px",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#333",
fontWeight: "bold",
fontSize: size / 2.5,
userSelect: "none",
} }, initials));
};