synapse-react-client/dist/components/Ecosystem/EcosystemCard.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { useTheme as p, useMediaQuery as g, Box as h, Typography as i, Link as y } from "@mui/material";
const n = "72px";
function f(o) {
  const { title: s, titleUrl: a, description: m, image: d } = o, { breakpoints: c } = p(), l = g(c.down("sm"));
  return /* @__PURE__ */ r(
    h,
    {
      component: "section",
      sx: (t) => ({
        display: "grid",
        alignItems: "top",
        gap: 2,
        py: 2,
        [t.breakpoints.down("sm")]: {
          gridTemplateColumns: "1fr",
          ".EcosystemCardImageContainer": {
            textAlign: "center",
            img: { maxWidth: "100%", height: n }
          }
        },
        [t.breakpoints.up("sm")]: {
          gridTemplateColumns: `${n} auto`,
          ".EcosystemCardImageContainer": {
            justifySelf: "center",
            img: { width: n, maxHeight: n }
          }
        }
      }),
      children: [
        /* @__PURE__ */ e("div", { className: "EcosystemCardImageContainer", children: d }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e(
            i,
            {
              component: "h3",
              variant: l ? "headline3" : "body1",
              sx: { mb: "5px" },
              children: /* @__PURE__ */ e(y, { href: a, target: "_blank", rel: "noopener noreferrer", children: s })
            }
          ),
          /* @__PURE__ */ e(
            i,
            {
              component: "div",
              variant: "body1",
              sx: { color: "grey.700" },
              children: m
            }
          )
        ] })
      ]
    }
  );
}
export {
  f as default
};
//# sourceMappingURL=EcosystemCard.js.map