@anoki/fse-ui
Version:
FSE UI components library
205 lines (204 loc) • 8.43 kB
JavaScript
import { j as e } from "./index.es278.js";
import { Divider as y } from "./index.es104.js";
import { LOGOS as x } from "./index.es161.js";
import { clsx as s } from "./index.es280.js";
import { Balancer as k } from "./index.es290.js";
import { Button as C } from "./index.es36.js";
import { Container as I } from "./index.es91.js";
import './components/navigations/HeaderDesktop/HeaderDesktop.css';/* empty css */
import { HeaderSlim as z } from "./index.es164.js";
import { Row as r } from "./index.es219.js";
const E = ({
title: l,
region: c,
asLink: m = "a",
labels: p,
navigatonItems: j,
supportLink: t,
loginLink: f = "/",
shortTitle: d,
headerTitleClassname: u,
children: g,
headerLogoUrl2: h,
variant: a = "default"
}) => {
const n = m, b = x.nazionale, N = x[c], o = a === "operator" ? "text-white" : "text-primary", v = a === "operator" ? "text-white" : "text-blue-30";
return /* @__PURE__ */ e.jsxs(
"div",
{
className: s(
"sticky-header bg-white",
a === "operator" && "ui-header-desktop-operator"
),
children: [
/* @__PURE__ */ e.jsxs(
z,
{
pt: "x16",
pb: "x16",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
containerClassName: s(
a === "operator" ? "ui-slim-operator" : "bg-slate-20"
),
children: [
/* @__PURE__ */ e.jsxs(
n,
{
href: "/",
className: s(
"fw-semibold text-decoration-none fs-7 hover-underline base-row align-items-center justify-content-center gap-x8",
a === "default" ? "text-white" : "text-slate-20"
),
children: [
h && /* @__PURE__ */ e.jsx(
"div",
{
style: { backgroundImage: `url(${h})` },
className: "ui-header-item-image"
}
),
d || l,
/* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Vai alla homepage" })
]
}
),
g
]
}
),
/* @__PURE__ */ e.jsxs(
"header",
{
className: s(a === "operator" ? "bg-radial" : "bg-white"),
children: [
/* @__PURE__ */ e.jsxs(
r,
{
py: "x20",
gap: "x16",
alignItems: "center",
justifyContent: "space-between",
className: "max-h-x116 ui-container",
children: [
/* @__PURE__ */ e.jsxs(r, { gap: "x16", alignItems: "center", children: [
/* @__PURE__ */ e.jsxs(r, { gap: "x16", alignItems: "center", justifyContent: "center", children: [
/* @__PURE__ */ e.jsx(b, { height: 44, width: 27, variant: a }),
c !== "nazionale" && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(y, { bg: "border-divider", direction: "vertical" }),
/* @__PURE__ */ e.jsx(
N,
{
width: 44,
height: 44,
color: a === "operator" ? "lightblue-a03" : "white"
}
)
] })
] }),
/* @__PURE__ */ e.jsx("h1", { className: s(u, "ui-header-title"), children: a === "default" ? /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsxs(
n,
{
href: "/",
className: "text-decoration-none hover-underline_dark",
children: [
/* @__PURE__ */ e.jsx("span", { className: "ui-title-line-height", children: l }),
/* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Vai alla homepage" })
]
}
) }) : /* @__PURE__ */ e.jsxs(
n,
{
href: "/",
className: "text-decoration-none hover-underline_dark",
children: [
/* @__PURE__ */ e.jsx("span", { className: "ui-title-line-height", children: l }),
/* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Vai alla homepage" })
]
}
) })
] }),
/* @__PURE__ */ e.jsxs(
C,
{
size: "2",
href: f,
asLink: "a",
className: "login-button",
variant: a === "operator" ? "secondary" : "primary",
children: [
/* @__PURE__ */ e.jsxs("span", { style: { fontSize: 14 }, children: [
" ",
p.login,
" "
] }),
/* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: " Accedi con Cohesion" })
]
}
)
]
}
),
/* @__PURE__ */ e.jsx("nav", { "aria-label": "Menu di navigazione", className: "shadow-bottom", children: /* @__PURE__ */ e.jsxs(
I,
{
containerClass: "ui-container",
className: "base-row align-items-center justify-content-between max-h-x52",
children: [
/* @__PURE__ */ e.jsx(r, { as: "ul", className: "list-style-none", role: "list", children: j.map((i, w) => /* @__PURE__ */ e.jsx(
"li",
{
className: s(
"py-x12 px-x16 ui-header-desktop-nav-item max-h-x52",
i.active && "active"
),
children: /* @__PURE__ */ e.jsxs(
n,
{
href: i.href,
className: s(
"text-decoration-none fs-custom",
i.active ? `fw-bold ${o}` : `fw-semibold ${o}`
),
target: i.isNewTab ? "_blank" : void 0,
rel: i.isNewTab ? "noopener noreferrer" : void 0,
children: [
i.label,
i.active && /* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Attivo" })
]
}
)
},
w
)) }),
t && /* @__PURE__ */ e.jsxs(
n,
{
href: t.href,
className: s(
"text-decoration-none fs-custom py-x12 px-x0",
t.active ? `fw-bold ${v}` : `fw-semibold ${o}`,
"ui-header-desktop-support-link",
t.active && (a === "operator" ? "active-operator" : "active")
),
children: [
t.label,
t.active && /* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Attivo" })
]
}
)
]
}
) })
]
}
)
]
}
);
};
export {
E as HeaderDesktop
};
//# sourceMappingURL=index.es319.js.map