synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
181 lines (180 loc) • 4.31 kB
JavaScript
import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { useTheme as g, useMediaQuery as f, Box as i, Typography as r, Button as m } from "@mui/material";
function v({
title: p,
subtitle: x,
description: o,
featureName: h,
link: d,
icons: t,
image: c
}) {
const s = g();
return f(s.breakpoints.down("md")) ? /* @__PURE__ */ n(
i,
{
sx: {
display: "flex",
flexDirection: "column",
rowGap: "20px",
p: "50px 15px"
},
children: [
/* @__PURE__ */ e(
r,
{
variant: "headline3",
sx: {
color: "primary.100",
fontSize: "36px",
lineHeight: "36px",
fontWeight: 400,
textAlign: "center"
},
children: p
}
),
/* @__PURE__ */ e(
r,
{
variant: "headline3",
sx: {
color: "primary.100",
fontSize: "24px",
fontWeight: 700,
lineHeight: "28px",
textAlign: "center"
},
children: x
}
),
/* @__PURE__ */ e(
i,
{
sx: {
display: "flex",
justifyContent: "center",
alignItems: "center",
columnGap: "20px"
},
children: t && t.map((l, a) => /* @__PURE__ */ e(i, { children: l }, a))
}
),
/* @__PURE__ */ e(i, { sx: { svg: { width: "100%", height: "auto" } }, children: c }),
/* @__PURE__ */ e(
r,
{
variant: "body1",
sx: {
color: "primary.100",
fontSize: "16px",
mb: "25px"
},
children: o
}
),
/* @__PURE__ */ n(
m,
{
variant: "contained",
color: "lightPrimary",
href: d,
target: "_blank",
fullWidth: !0,
children: [
"About ",
h
]
}
)
]
}
) : /* @__PURE__ */ n(
i,
{
sx: {
display: "grid",
gridTemplateColumns: "450px auto",
columnGap: {
xs: "40px",
lg: "120px"
},
pb: "120px"
},
children: [
/* @__PURE__ */ n(i, { sx: { mb: "50px", width: "437px" }, children: [
/* @__PURE__ */ e(
r,
{
variant: "headline3",
sx: {
color: "primary.100",
fontSize: "36px",
lineHeight: "24px",
mb: "30px",
fontWeight: 400
},
children: p
}
),
/* @__PURE__ */ e(
r,
{
variant: "headline3",
sx: {
color: "primary.100",
fontSize: "24px",
lineHeight: "32px",
mb: "20px",
fontWeight: 700
},
children: x
}
),
/* @__PURE__ */ e(
r,
{
variant: "body1",
sx: {
color: "primary.100",
mb: "30px"
},
children: o
}
),
/* @__PURE__ */ e(
i,
{
sx: {
display: "flex",
gap: "10px",
alignItems: "center",
mb: "25px"
},
children: t && t.map((l, a) => /* @__PURE__ */ e(i, { children: l }, a))
}
),
/* @__PURE__ */ n(
m,
{
variant: "contained",
size: "large",
color: "lightPrimary",
href: d,
target: "_blank",
children: [
"About ",
h
]
}
)
] }),
/* @__PURE__ */ e(i, { sx: { mr: "25px", svg: { width: "100%" } }, children: c })
]
}
);
}
export {
v as SynapseFeatureItem
};
//# sourceMappingURL=SynapseFeatureItem.js.map