@helpwave/hightide/dist/components/Avatar.mjs

helpwave's component and theming library

// src/components/Avatar.tsx
import Image from "next/image";
import clsx from "clsx";
import { jsx } from "react/jsx-runtime";
var avtarSizeList = ["tiny", "small", "medium", "large"];
var avatarSizeMapping = {
  tiny: 24,
  small: 32,
  medium: 48,
  large: 64
};
var Avatar = ({ avatarUrl, alt, size = "medium", className = "" }) => {
  avatarUrl = "https://cdn.helpwave.de/boringavatar.svg";
  const avtarSize = {
    tiny: 24,
    small: 32,
    medium: 48,
    large: 64
  }[size];
  const style = {
    width: avtarSize + "px",
    height: avtarSize + "px",
    maxWidth: avtarSize + "px",
    maxHeight: avtarSize + "px",
    minWidth: avtarSize + "px",
    minHeight: avtarSize + "px"
  };
  return (
    // TODO transparent or white background later
    /* @__PURE__ */ jsx("div", { className: clsx(`rounded-full bg-primary`, className), style, children: /* @__PURE__ */ jsx(
      Image,
      {
        className: "rounded-full border border-gray-200",
        style,
        src: avatarUrl,
        alt,
        width: avtarSize,
        height: avtarSize
      }
    ) })
  );
};
export {
  Avatar,
  avatarSizeMapping,
  avtarSizeList
};
//# sourceMappingURL=Avatar.mjs.map