UNPKG

@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
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 };