synapse-react-client/dist/components/ReleaseCard/ReleaseCardLarge.js

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

import { jsx as e, jsxs as n, Fragment as R } from "react/jsx-runtime";
import { CalendarTodayTwoTone as S } from "@mui/icons-material";
import { Box as b, Stack as a, Typography as s, Button as m, Divider as g } from "@mui/material";
import { useState as u, useEffect as A, Fragment as I } from "react";
import { Link as h } from "react-router";
import { formatReleaseCardData as Q, formatExplorePagePathAndQueryString as y } from "./ReleaseCardUtils.js";
function f({ value: r, label: t }) {
  return /* @__PURE__ */ n(
    a,
    {
      direction: "column",
      sx: {
        alignItems: "center",
        padding: { xs: "20px 10px", md: "20px 40px" },
        gap: "10px",
        // ensure that stats are aligned when multiple cards are stacked vertically
        width: { xs: "unset", lg: "200px" }
      },
      children: [
        /* @__PURE__ */ e(s, { variant: "headline1", children: r }),
        /* @__PURE__ */ e(
          s,
          {
            variant: "body1",
            sx: {
              lineHeight: "20px",
              color: "grey.700"
            },
            children: t
          }
        )
      ]
    }
  );
}
function L({
  data: r,
  schema: t,
  includePortalCardClass: w = !0,
  releaseCardConfig: i
}) {
  const { releaseName: p, releaseDate: B, stats: v } = Q(
    t,
    r,
    i.releaseMetadataConfig,
    i.statsConfig
  ), { primaryBtnConfig: o, secondaryBtnConfig: l } = i, [c, P] = u(null), [d, C] = u(null);
  return A(() => {
    y(t, r, o).then(
      P
    ), y(t, r, l).then(
      C
    );
  }, [t, r, o, l]), p === null ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ e(
    b,
    {
      className: `ReleaseCard ${w ? "SRC-portalCard" : ""}`,
      sx: {
        minWidth: "200px"
      },
      children: /* @__PURE__ */ n(
        a,
        {
          direction: { xs: "column", lg: "row" },
          sx: {
            justifyContent: "space-between",
            gap: "20px",
            padding: "20px"
          },
          children: [
            /* @__PURE__ */ n(
              a,
              {
                direction: "column",
                sx: {
                  gap: "20px"
                },
                children: [
                  /* @__PURE__ */ n(
                    a,
                    {
                      direction: "row",
                      sx: {
                        alignItems: "center",
                        gap: "10px"
                      },
                      children: [
                        /* @__PURE__ */ e(S, { sx: { color: "grey.700" } }),
                        /* @__PURE__ */ n(s, { variant: "headline1", children: [
                          i.prependRelease && "Release ",
                          p
                        ] })
                      ]
                    }
                  ),
                  /* @__PURE__ */ n(
                    a,
                    {
                      direction: { xs: "column", sm: "row" },
                      sx: {
                        alignItems: { xs: "flex-start", sm: "center" },
                        gap: "20px"
                      },
                      children: [
                        o && c && /* @__PURE__ */ e(
                          m,
                          {
                            component: h,
                            variant: "contained",
                            color: "primary",
                            to: c,
                            children: o.label
                          }
                        ),
                        l && d && /* @__PURE__ */ e(m, { component: h, to: d, children: l.label })
                      ]
                    }
                  )
                ]
              }
            ),
            /* @__PURE__ */ e(g, {}),
            " ",
            /* @__PURE__ */ n(
              a,
              {
                direction: "row",
                sx: {
                  gap: { xs: 0, lg: "10px" },
                  alignItems: "center",
                  justifyContent: { xs: "space-evenly", lg: "unset" },
                  flexWrap: { xs: "wrap", lg: "nowrap" }
                },
                children: [
                  /* @__PURE__ */ e(f, { ...B }),
                  v.map((x) => /* @__PURE__ */ n(I, { children: [
                    /* @__PURE__ */ e(g, { orientation: "vertical", flexItem: !0 }),
                    /* @__PURE__ */ e(f, { ...x })
                  ] }, x.label))
                ]
              }
            )
          ]
        }
      )
    }
  );
}
export {
  L as ReleaseCardLarge
};
//# sourceMappingURL=ReleaseCardLarge.js.map