@achs/webkit
Version:
Conjunto de componentes de UI con el estilo del Sistema de Diseño ACHS (Asociación Chilena de Seguridad), para reutilizar de forma transversal en las aplicaciones web de ACHS. Construido con **React 19**, **TypeScript** y **Vite**, con soporte para las
46 lines (45 loc) • 1.39 kB
JavaScript
import { jsxs as l, jsx as r } from "react/jsx-runtime";
import a from "./ProfileCard.module.scss.mjs";
const o = (s) => typeof s != "string" ? "" : s.trim().split(/\s+/).slice(0, 2).map((e) => {
var i;
return ((i = e[0]) == null ? void 0 : i.toUpperCase()) ?? "";
}).join(""), N = ({
name: s,
role: e,
avatar: i,
description: t,
action: c,
color: d = "primary",
className: n,
...m
}) => /* @__PURE__ */ l(
"div",
{
className: `${a.card} ${n ?? ""}`.trim(),
"data-color": d,
...m,
children: [
/* @__PURE__ */ l("div", { className: a.header, children: [
i ? /* @__PURE__ */ r(
"img",
{
className: a.avatar,
src: i,
alt: typeof s == "string" ? s : "",
loading: "lazy"
}
) : /* @__PURE__ */ r("span", { className: a.avatar, "data-fallback": "true", "aria-hidden": "true", children: o(s) }),
/* @__PURE__ */ l("div", { className: a.identity, children: [
/* @__PURE__ */ r("span", { className: a.name, children: s }),
e && /* @__PURE__ */ r("span", { className: a.role, children: e })
] })
] }),
t && /* @__PURE__ */ r("p", { className: a.description, children: t }),
c && /* @__PURE__ */ r("div", { className: a.action, children: c })
]
}
);
export {
N as ProfileCard,
N as default
};