synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
66 lines (65 loc) • 1.99 kB
JavaScript
import { jsxs as g, jsx as e } from "react/jsx-runtime";
import { Box as p, Fade as l, Slide as c, CardMedia as h } from "@mui/material";
import { useInView as f } from "react-intersection-observer";
import u from "../PortalSectionHeader/PortalSectionHeader.js";
const t = 400, j = (n) => {
const { reverseOrder: i, image: m, title: o, buttonText: d, summaryText: a, link: x } = n, [s, r] = f({ threshold: 0.3, triggerOnce: !0 });
return /* @__PURE__ */ g(
p,
{
ref: s,
sx: {
display: "grid",
padding: { xs: "40px", lg: "80px" },
gap: { xs: "38px", md: "80px" },
gridTemplateColumns: {
xs: "minmax(100px, 1fr)",
md: "1fr 1fr",
lg: i ? "minmax(150px, 1fr) minmax(300px, 2fr)" : "minmax(300px, 2fr) minmax(150px, 1fr)"
},
gridTemplateAreas: {
xs: "'image' 'content'",
md: i ? "'content image'" : "'image content'"
}
},
children: [
/* @__PURE__ */ e(l, { in: r, timeout: t, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
c,
{
direction: i ? "left" : "right",
timeout: t,
in: r,
children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
h,
{
component: "img",
image: m,
sx: {
gridArea: "image",
borderRadius: "12px",
height: "100%",
width: "100%",
objectFit: "cover"
}
}
) })
}
) }) }),
/* @__PURE__ */ e(
u,
{
title: o,
buttonText: d,
link: x,
summaryText: a,
sx: { gridArea: "content", h2: { width: "100%" } }
}
)
]
}
);
};
export {
j as default
};
//# sourceMappingURL=PortalFeatureHighlights.js.map