synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
155 lines (154 loc) • 4.63 kB
JavaScript
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { darkTextColor as w, homepageBodyText as T } from "./HomepageStyles.js";
import { useTheme as S, useMediaQuery as k, Box as i, Chip as C, Typography as p, Link as I, Fade as j, Slide as V } from "@mui/material";
import r from "../ImageFromSynapseTable.js";
import { EastTwoTone as v } from "@mui/icons-material";
import { useInView as H } from "react-intersection-observer";
const s = 320, W = {
display: "flex",
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
textAlign: "center"
};
function D({
tableId: n,
friendlyName: o,
title: m,
description: c,
tags: l,
logoFileHandleId: a,
link: h,
imageFileHandleId: f,
mobileImageFileHandleId: u
}) {
const y = S(), g = k(y.breakpoints.down("sm")), [b, x] = H({ threshold: 0.3, triggerOnce: !0 });
return /* @__PURE__ */ t(
i,
{
ref: b,
sx: {
p: { xs: "10px", md: "15px 0px 0px 15px" },
display: "grid",
gridTemplateColumns: {
xs: "auto 0px",
md: "450px auto"
}
},
children: [
/* @__PURE__ */ t(
i,
{
sx: {
ml: {
xs: "0px",
md: "20px"
}
},
children: [
/* @__PURE__ */ e(
i,
{
sx: {
display: { xs: "flex", md: "none" },
justifyContent: "center",
width: "100%",
mb: "10px",
pt: "50px",
img: { width: "320px", maxWidth: "100%" }
},
children: /* @__PURE__ */ e(
r,
{
tableId: n,
fileHandleId: u
}
)
}
),
/* @__PURE__ */ t(i, { sx: g ? W : { pt: "50px" }, children: [
/* @__PURE__ */ e(i, { children: l && l.map((d) => /* @__PURE__ */ e(
C,
{
sx: {
mr: "5px",
color: "secondary.600",
backgroundColor: "secondary.100",
borderWidth: "0px"
},
label: d
},
d
)) }),
/* @__PURE__ */ e(
p,
{
variant: "body1",
sx: {
fontWeight: 400,
fontSize: "36px",
lineHeight: "46px",
mt: "32px",
color: w
},
children: m
}
),
/* @__PURE__ */ e(
p,
{
variant: "body1",
sx: {
...T,
mt: "32px",
mb: "32px"
},
children: c
}
),
/* @__PURE__ */ e(
r,
{
tableId: n,
fileHandleId: a,
alt: `${o} logo`,
style: { height: "40px" }
}
),
/* @__PURE__ */ e(i, { sx: { mt: "32px", pb: "50px" }, children: /* @__PURE__ */ t(I, { href: h, target: "_blank", children: [
"View ",
o.endsWith("Portal") ? "the" : "",
" ",
o,
" ",
/* @__PURE__ */ e(v, { sx: { mb: "-8px", ml: "6px" } })
] }) })
] })
]
}
),
/* @__PURE__ */ e(
i,
{
sx: {
display: { xs: "none", md: "block" },
justifySelf: "end",
alignSelf: "end"
},
children: /* @__PURE__ */ e(j, { in: x, timeout: s, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(V, { direction: "left", timeout: s, in: x, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
r,
{
tableId: n,
fileHandleId: f
}
) }) }) }) })
}
)
]
}
);
}
export {
D as SynapseInActionItem
};
//# sourceMappingURL=SynapseInActionItem.js.map