@helpwave/hightide
Version:
helpwave's component and theming library
81 lines (80 loc) • 2.53 kB
JavaScript
// src/components/Avatar.tsx
import Image from "next/image";
import clsx from "clsx";
import { jsx } from "react/jsx-runtime";
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
}
) })
);
};
// src/components/AvatarGroup.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var AvatarGroup = ({
avatars,
maxShownProfiles = 5,
size = "tiny"
}) => {
const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
const diameter = avatarSizeMapping[size];
const stackingOverlap = 0.5;
const notDisplayedProfiles = avatars.length - maxShownProfiles;
const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
return /* @__PURE__ */ jsxs("div", { className: "row relative", style: { height: diameter + "px" }, children: [
/* @__PURE__ */ jsx2("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ jsx2(
"div",
{
className: "absolute",
style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
children: /* @__PURE__ */ jsx2(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
},
index
)) }),
notDisplayedProfiles > 0 && /* @__PURE__ */ jsx2(
"div",
{
className: "truncate row items-center",
style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
children: /* @__PURE__ */ jsxs("span", { children: [
"+ ",
notDisplayedProfiles
] })
}
)
] });
};
export {
AvatarGroup
};
//# sourceMappingURL=AvatarGroup.mjs.map