/* global React */
const { useState, useMemo, useEffect, useRef } = React;
// ── Icons ──────────────────────────────────────────────────────
const Icon = {
Logo: () => (
),
Clock: (p) => (
),
Users: (p) => (
),
Team: (p) => (
),
Building: (p) => (
),
Globe: (p) => (
),
Layers: (p) => (
),
Search: (p) => (
),
Spark: (p) => (
),
Check: (p) => (
),
Circle: (p) => (
),
Play: (p) => (
),
Pause: (p) => (
),
Mic: (p) => (
),
Close: (p) => (
),
Wiki: (p) => (
),
List: (p) => (
),
Target: (p) => (
),
Wave: (p) => (
),
Decision: (p) => (
),
Blocker: (p) => (
),
Idea: (p) => (
),
File: (p) => (
),
Send: (p) => (
),
Mail: (p) => (
),
Calendar: (p) => (
),
ArrowLeft: (p) => (
),
ArrowRight: (p) => (
),
Plus: (p) => (
),
Eye: (p) => (
),
Heart: (p) => (
),
Hash: (p) => (
),
Chevron: (p) => (
),
SignOut: (p) => (
),
AlertCircle: (p) => (
),
Edit: (p) => (
),
Settings: (p) => (
),
};
// ── Avatar helper ──────────────────────────────────────────────
function avatarBg(name) {
let hash = 0;
for (let i = 0; i < name.length; i++) hash = (hash + name.charCodeAt(i)) * 7;
const offset = (hash % 5) * 25;
const h1 = `calc(var(--avatar-hue) + ${offset})`;
const h2 = `calc(var(--avatar-hue) + ${offset + 15})`;
return `linear-gradient(135deg, hsl(${h1} 38% 48%), hsl(${h2} 42% 54%))`;
}
function Avatar({ name, size, you }) {
const init = name
.split(" ")
.map((p) => p[0])
.slice(0, 2)
.join("")
.toUpperCase();
const cls =
size === "lg" ? "avatar lg" : size === "sm" ? "avatar sm" : "avatar";
const bg = you ? "var(--avatar-you)" : avatarBg(name);
return (
{init}
);
}
window.Icon = Icon;
window.Avatar = Avatar;