avatar.tsx

import { h } from "@stencil/core";
import { IUser } from "../interfaces/user.interface";

export const UserAvatar = ({ user, size = 36 }: {user: IUser, size: number}) => {
  const {name, luminosity, name} = user;
  const [r, g, b] = themeColor
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      width={size}
      height={size}
    >
      <circle
        cx="50"
        cy="50"
        r="50"
        fill={`rgb(${r}, ${g}, ${b})`}
      ></circle>
      <text
        x="50"
        y="54"
        text-anchor="middle"
        dominant-baseline="middle"
        // pointerEvents:
        style={{
          fill: luminosity === "dark" ? "white" : "black",
          fontSize: "60",
          "pointer-events": "none",
          "user-select": "none"
        }}
        // font-size="50"
      >
        {name.split("")[0]}
      </text>
    </svg>
  );
};