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

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

import { jsx as o, jsxs as r } from "react/jsx-runtime";
import { useTheme as p, useMediaQuery as u, Box as h, Tabs as b, Tab as x } from "@mui/material";
import f from "@mui/material/Fade";
import { useState as v } from "react";
const B = (l) => {
  const [s, c] = v(0), { config: a } = l, { breakpoints: n } = p(), i = u(n.down("sm")), m = i ? "horizontal" : "vertical";
  return /* @__PURE__ */ o("div", { className: "Ecosystem", children: /* @__PURE__ */ r(
    h,
    {
      className: "control-container",
      sx: {
        display: "flex",
        [n.up("sm")]: { height: "450px" },
        [n.down("sm")]: { flexDirection: "column" }
      },
      children: [
        /* @__PURE__ */ r(
          b,
          {
            className: "button-container",
            value: s,
            onChange: (t, e) => c(e),
            orientation: m,
            variant: "scrollable",
            scrollButtons: "auto",
            allowScrollButtonsMobile: !0,
            sx: (t) => ({
              [t.breakpoints.up("sm")]: {
                borderRight: "2px solid #dcdcdc"
              }
            }),
            children: [
              a.map((t, e) => {
                const { title: d } = t;
                return /* @__PURE__ */ o(x, { label: d }, e);
              }),
              !i && /* @__PURE__ */ o("div", { className: "flex-spacer" })
            ]
          }
        ),
        /* @__PURE__ */ o("div", { className: "content-container", children: a.map((t, e) => /* @__PURE__ */ o(f, { in: s === e, children: /* @__PURE__ */ o("span", { className: s === e ? "" : "SRC-hidden", children: t.content }) }, e)) })
      ]
    }
  ) });
};
export {
  B as default
};
//# sourceMappingURL=EcosystemLayout.js.map