synapse-react-client/dist/components/UserProfileLinks/UserProfileLinks.js

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

import { jsx as o, jsxs as m, Fragment as c } from "react/jsx-runtime";
import "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import { useState as d, useMemo as f } from "react";
import "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import "@mui/material";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css                                   */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import { useGetUserProfile as h } from "../../synapse-queries/user/useUserBundle.js";
import T from "@mui/material/Skeleton";
import p from "@mui/material/Typography";
import { Box as s } from "@mui/system";
import { SynapseErrorBoundary as u } from "../error/ErrorBanner.js";
import b from "../IconSvg/IconSvg.js";
import N from "./UserChallenges.js";
import x from "./UserProjects.js";
import P from "./UserTeams.js";
function nr({ userId: e }) {
  const [n, l] = d("Projects"), { data: t } = h(e), a = f(
    () => [
      {
        name: "Projects",
        iconName: "dashboard",
        render: /* @__PURE__ */ o(x, { userId: e })
      },
      {
        name: "Teams",
        iconName: "peopleTwoTone",
        render: /* @__PURE__ */ o(P, { userId: e })
      },
      {
        name: "Challenges",
        iconName: "challengesTwoTone",
        render: /* @__PURE__ */ o(N, { userId: e })
      }
    ],
    [e]
  );
  return /* @__PURE__ */ m("div", { className: "UserProfileLinks", children: [
    /* @__PURE__ */ m(p, { variant: "headline2", className: "title", children: [
      t && /* @__PURE__ */ m(c, { children: [
        t?.userName,
        "'s Items"
      ] }),
      !t && /* @__PURE__ */ o(T, { width: "75%" })
    ] }),
    /* @__PURE__ */ o(
      s,
      {
        className: "Tabs",
        sx: (r) => ({
          [r.breakpoints.down("sm")]: {
            flexDirection: "column",
            gap: "8px"
          }
        }),
        children: a.map((r) => /* @__PURE__ */ o(
          s,
          {
            className: "Tab",
            role: "tab",
            sx: (i) => ({
              [i.breakpoints.down("sm")]: {
                minHeight: "45px"
              }
            }),
            onClick: (i) => {
              i.stopPropagation(), l(r.name);
            },
            "aria-selected": n === r.name,
            children: /* @__PURE__ */ m(p, { variant: "buttonLink", children: [
              /* @__PURE__ */ o(b, { icon: r.iconName }),
              " ",
              r.name
            ] })
          },
          r.name
        ))
      }
    ),
    /* @__PURE__ */ o("div", { className: "TabContent", children: /* @__PURE__ */ o(u, { children: a.find((r) => n === r.name)?.render }) })
  ] });
}
export {
  nr as UserProfileLinks,
  nr as default
};
//# sourceMappingURL=UserProfileLinks.js.map