@cgi-learning-hub/ui/dist/components/ResourceCard/ResourceCard.es.js

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

import { jsx as r, jsxs as i } from "react/jsx-runtime";
import { M as b } from "../../MoreVert-C_W1m_Z_.js";
import { Box as x, Stack as f, Tooltip as y } from "@mui/material";
import g from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
import { StyledCard as P, SelectedIcon as R, ResourceCardImage as D, ResourceCardBody as I, ResourcePropertyItem as $, ResourcePropertyText as v, PublicIconWrapper as w, ResourceIconItem as j } from "./style.es.js";
const S = ({
  isSelected: n = !1,
  onSelect: m = () => {
  },
  image: s,
  title: c,
  defaultImage: u,
  propertyItems: p = [],
  infoIcons: a = [],
  size: t = "md",
  width: d,
  onClick: l = () => {
  },
  hasNoButtonOnFocus: h = !1
}) => (a = a.slice(0, 3), /* @__PURE__ */ r(x, { sx: { width: d && t === "md" ? d : "320px" }, children: /* @__PURE__ */ i(
  P,
  {
    selected: n,
    size: t,
    onClick: l,
    onKeyDown: (e) => {
      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l == null || l());
    },
    role: "button",
    tabIndex: 0,
    "aria-label": `Resource card for ${c}`,
    children: [
      /* @__PURE__ */ r(
        R,
        {
          onClick: (e) => {
            e.preventDefault(), e.stopPropagation(), m();
          },
          onKeyDown: (e) => {
            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), m());
          },
          className: "selected-icon",
          selected: n,
          role: "button",
          tabIndex: 0,
          "aria-label": n ? "Unselect card" : "Select card",
          hasNoButtonOnFocus: h,
          children: /* @__PURE__ */ r(b, {})
        }
      ),
      /* @__PURE__ */ r(
        f,
        {
          sx: {
            width: t == "sm" ? 110 : "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            boxSizing: "border-box"
          },
          children: /* @__PURE__ */ r(
            D,
            {
              image: s,
              defaultImage: u,
              size: t,
              role: "img",
              "aria-label": `Image for ${c}`
            }
          )
        }
      ),
      /* @__PURE__ */ i(I, { size: t, children: [
        /* @__PURE__ */ r(
          g,
          {
            typographyProps: { variant: "h4", component: "p" },
            tooltipProps: { placement: "bottom", arrow: !0 },
            children: c
          }
        ),
        p.length > 0 && p.map((e, o) => /* @__PURE__ */ i(
          $,
          {
            size: t,
            role: "group",
            "aria-label": `Property ${o}`,
            children: [
              e.icon,
              /* @__PURE__ */ r(
                v,
                {
                  isLast: o === p.length - 1,
                  size: t,
                  width: d,
                  children: e.text
                }
              )
            ]
          },
          `property-${o}`
        )),
        /* @__PURE__ */ r(w, { size: t, children: a.length > 0 && a.map((e, o) => /* @__PURE__ */ r(
          y,
          {
            title: e.text,
            placement: "top",
            arrow: !0,
            children: /* @__PURE__ */ r(
              j,
              {
                size: t,
                role: "button",
                tabIndex: 0,
                "aria-label": e.text,
                children: e.icon
              }
            )
          },
          `info-${o}`
        )) })
      ] })
    ]
  }
) }));
export {
  S as default
};