alinea/dist/ui/Avatar.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../chunks/chunk-U5RRZUYZ.js";

// src/ui/Avatar.tsx
import { getRandomColor } from "alinea/core/util/GetRandomColor";
import { px } from "alinea/ui";
import { useContrastColor } from "./hook/UseContrastColor.js";
import { jsx } from "react/jsx-runtime";
function Avatar({ user }) {
  const letter = user.sub.charAt(0).toUpperCase();
  const background = getRandomColor(user.sub);
  const color = useContrastColor(background);
  return /* @__PURE__ */ jsx(
    "div",
    {
      style: {
        borderRadius: "100%",
        background,
        color,
        width: px(24),
        height: px(24),
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        fontSize: px(13),
        fontWeight: "bold"
      },
      children: /* @__PURE__ */ jsx("span", { children: letter })
    }
  );
}
export {
  Avatar
};