orcs-design-system/es/components/SideNavV2/sections/SideNavTeamsSection.js

TeamForm's Design System, aka: ORCS

import React from "react";
import PropTypes from "prop-types";
import Popover from "../../Popover";
import BaseSection, { AvatarLink, Item } from "../components/BaseSection";

/**
 * SideNavTeamsSection - Renders the "My Teams" section of the side navigation
 *
 * Handles presentation and layout. Business logic (team types, badges) should be handled
 * via custom renderTeamsSection prop in SideNavV2.
 *
 * @param {Array} teams - Array of teams with avatar, name, link, gradient
 * @param {boolean} isExpanded - Whether the sidebar is expanded
 */
import { jsx as _jsx } from "react/jsx-runtime";
const SideNavTeamsSection = _ref => {
  let {
    teams,
    isExpanded
  } = _ref;
  const renderTeamItem = (team, isExpanded) => {
    const {
      avatar,
      name,
      link,
      gradient
    } = team;

    // Skip rendering if required props are missing
    if (!name || !link) {
      return null;
    }
    return /*#__PURE__*/_jsx(Item, {
      children: isExpanded ? /*#__PURE__*/_jsx(AvatarLink, {
        avatar: avatar,
        name: name,
        link: link,
        shape: "square",
        showName: true,
        gradient: gradient
      }) : /*#__PURE__*/_jsx(Popover, {
        text: name,
        direction: "right",
        width: "fit-content",
        children: /*#__PURE__*/_jsx(AvatarLink, {
          avatar: avatar,
          name: name,
          link: link,
          shape: "square",
          showName: false,
          gradient: gradient
        })
      })
    }, name);
  };
  return /*#__PURE__*/_jsx(BaseSection, {
    title: "My Teams",
    items: teams || [],
    isExpanded: isExpanded,
    renderItem: renderTeamItem
  });
};
SideNavTeamsSection.propTypes = {
  teams: PropTypes.arrayOf(PropTypes.shape({
    avatar: PropTypes.string,
    name: PropTypes.string.isRequired,
    link: PropTypes.string.isRequired,
    gradient: PropTypes.string
  })),
  isExpanded: PropTypes.bool
};
SideNavTeamsSection.__docgenInfo = {
  "description": "SideNavTeamsSection - Renders the \"My Teams\" section of the side navigation\n\nHandles presentation and layout. Business logic (team types, badges) should be handled\nvia custom renderTeamsSection prop in SideNavV2.\n\n@param {Array} teams - Array of teams with avatar, name, link, gradient\n@param {boolean} isExpanded - Whether the sidebar is expanded",
  "methods": [],
  "displayName": "SideNavTeamsSection",
  "props": {
    "teams": {
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "avatar": {
              "name": "string",
              "required": false
            },
            "name": {
              "name": "string",
              "required": true
            },
            "link": {
              "name": "string",
              "required": true
            },
            "gradient": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "isExpanded": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    }
  }
};
export default SideNavTeamsSection;