synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
265 lines (264 loc) • 7.61 kB
JavaScript
import { jsx as e, jsxs as r } from "react/jsx-runtime";
import { forwardRef as T } from "react";
import { useTheme as L, useMediaQuery as A, Box as t, Card as I, Typography as y } from "@mui/material";
import { CollapsibleDescription as z } from "../GenericCard/CollapsibleDescription.js";
import { useDocumentMetadata as N } from "../../utils/context/DocumentMetadataContext.js";
import { SmartButton as R } from "../SmartLink/SmartButton.js";
import { SmartLink as H } from "../SmartLink/SmartLink.js";
const G = T(function(i, n) {
const {
// type,
title: l,
subTitle: d = "",
description: p,
values: m,
// secondaryLabelLimit,
isAlignToLeftNav: f,
descriptionConfig: h,
charCountCutoff: w,
href: u,
target: C,
icon: x,
backgroundImage: g,
forceStackedLayout: F = !1,
ctaLinkConfig: a
} = i, v = L(), S = A(v.breakpoints.down("md"));
let o = !1;
(F || S) && (o = !0);
const k = {
...h,
showFullDescriptionByDefault: h?.showFullDescriptionByDefault ?? !1
};
N({
title: l,
description: p || d || void 0,
priority: 100
});
const b = a ? Array.isArray(a) ? a : [a] : [], D = b.length > 0 ? /* @__PURE__ */ e(
t,
{
sx: { display: "flex", gap: 2, flexWrap: "wrap", marginTop: "22px" },
children: b.map((s, B) => /* @__PURE__ */ e(
R,
{
variant: "outlined",
href: s?.href,
target: s?.target,
size: "large",
sx: {
color: "#FFF",
"&:hover": {
color: "#FFF",
textDecorationColor: "#FFF",
border: "2px solid white"
},
"&:focus": { color: "#FFF" },
textDecorationColor: "#FFF",
padding: "6px 24px",
border: "1px solid white"
},
children: s?.text
},
B
))
}
) : null;
return /* @__PURE__ */ e(
I,
{
component: "div",
ref: n,
sx: {
borderRadius: 0,
boxShadow: "none",
position: "relative",
...g && {
"&::before": {
content: '""',
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundImage: `url(${g})`,
backgroundSize: "cover",
backgroundPosition: "center",
opacity: 0.1,
zIndex: 0
}
},
...f && {
// Add any special styles for aligned cards
}
},
className: `SRC-portalCard SRC-portalCardHeader ${f ? "isAlignToLeftNav" : ""}`,
children: /* @__PURE__ */ r(
t,
{
sx: {
marginLeft: "auto",
marginRight: "auto",
maxWidth: "1400px",
display: "grid",
gridTemplateColumns: "1fr 12fr 1fr",
"& > *": {
gridColumn: 2
},
paddingBottom: "25px"
},
children: [
/* @__PURE__ */ r(
t,
{
sx: {
display: "flex",
flexDirection: "row",
alignItems: "center",
minHeight: "64px",
// Set minimum height to ensure proper centering space
gap: 1
},
children: [
x && /* @__PURE__ */ e(
t,
{
sx: {
height: "120px"
},
children: x
}
),
/* @__PURE__ */ r(t, { sx: {}, children: [
/* @__PURE__ */ e(
y,
{
sx: {
mb: 1,
fontSize: "2.5rem",
letterSpacing: "0.1em",
// Add letter spacing
marginBottom: "0.6em"
},
children: u ? /* @__PURE__ */ e(
H,
{
href: u,
target: C,
underline: "hover",
color: "inherit",
children: l
}
) : l
}
),
d && /* @__PURE__ */ e(
y,
{
variant: "body1",
color: "inherit",
sx: {
fontStyle: "italic",
fontSize: "1.5rem"
},
children: d
}
)
] })
]
}
),
/* @__PURE__ */ r(
t,
{
sx: {
display: "flex",
flexDirection: o ? "column" : "row",
flexWrap: o ? "nowrap" : "wrap",
justifyContent: "space-between",
alignItems: "flex-start",
gap: 2
},
children: [
/* @__PURE__ */ r(
t,
{
style: {
flexBasis: o ? "100%" : "min(65ch, 100%)",
width: o ? "100%" : "auto"
},
children: [
/* @__PURE__ */ e(
z,
{
description: p,
descriptionSubTitle: "",
descriptionConfig: k,
charCountCutoff: w
}
),
D
]
}
),
m && /* @__PURE__ */ e(
t,
{
sx: {
width: o ? "100%" : "30%",
marginTop: o ? 2 : 0,
alignItems: "flex-start"
},
children: /* @__PURE__ */ e(M, { data: m })
}
)
]
}
)
]
}
)
}
);
});
function M({ data: c }) {
return /* @__PURE__ */ e(
"table",
{
style: {
width: "100%",
borderCollapse: "collapse"
},
children: /* @__PURE__ */ e("tbody", { children: c.map((i, n) => /* @__PURE__ */ r("tr", { children: [
/* @__PURE__ */ e(
"td",
{
style: {
width: "1%",
whiteSpace: "nowrap",
padding: "0px 16px 8px 0",
verticalAlign: "top",
fontWeight: "bold"
},
children: i.columnDisplayName
}
),
/* @__PURE__ */ e(
"td",
{
style: {
width: "auto",
paddingBottom: "12px",
verticalAlign: "top",
wordBreak: "break-word"
},
children: i.value
}
)
] }, i.columnName || n)) })
}
);
}
export {
G as default
};
//# sourceMappingURL=HeaderCardV2.js.map