@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
62 lines (61 loc) • 1.55 kB
JavaScript
import { jsxs as f, jsx as n } from "react/jsx-runtime";
import { c as u } from "./index-CzIeYJrm.mjs";
import { useState as d, useEffect as m } from "react";
import { c } from "./index-2NvaPZWc.mjs";
import { a as p } from "./misc-Ci6Z8ZmP.mjs";
const v = (r) => {
var e, a, s;
const t = r.trim().split(" ");
if (p(t)) return "";
if (t.length === 1)
return ((e = t.at(0)) == null ? void 0 : e.substring(0, 2).toLocaleUpperCase()) ?? "";
const o = ((a = t.at(0)) == null ? void 0 : a.at(0)) ?? "", i = ((s = t.at(-1)) == null ? void 0 : s.at(0)) ?? "";
return `${o}${i}`.toLocaleUpperCase();
}, g = {
size: {
sm: "size-8 text-xs",
default: "size-12",
lg: "size-16 text-xl"
}
}, x = u(
"relative flex shrink-0 overflow-hidden rounded-full",
{
variants: g,
defaultVariants: {
size: "default"
}
}
), I = ({
className: r,
src: t,
fallback: o,
size: i,
name: e
}) => {
const [a, s] = d(!1);
m(() => {
s(!1);
}, [t]);
const l = a ? null : e ? v(e) : o;
return /* @__PURE__ */ f("div", { className: c(x({ size: i }), r), children: [
t && /* @__PURE__ */ n(
"img",
{
className: c(
"aspect-square size-full object-cover",
!a && "opacity-0"
),
src: t,
onLoad: () => s(!0),
alt: [e, "avatar"].filter(Boolean).join(" ")
}
),
l && /* @__PURE__ */ n("div", { className: "flex-center bg-muted size-full rounded-full", children: l })
] });
};
export {
I as A,
g as a,
x as b,
v as g
};