github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/EnhancedAppSelector/SelectButton.tsx (about)

     1  import React from 'react';
     2  import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
     3  import { faFolderOpen } from '@fortawesome/free-solid-svg-icons/faFolderOpen';
     4  import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
     5  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
     6  import classNames from 'classnames/bind';
     7  // eslint-disable-next-line css-modules/no-unused-class
     8  import styles from './SelectButton.module.scss';
     9  
    10  const cx = classNames.bind(styles);
    11  
    12  export const MENU_ITEM_ROLE = 'menuitem';
    13  
    14  interface SelectButtonProps {
    15    name: string;
    16    fullList: string[];
    17    isSelected: boolean;
    18    onClick: () => void;
    19  }
    20  
    21  function Logo({ className }: { className: string }) {
    22    return (
    23      <svg
    24        className={className}
    25        xmlns="http://www.w3.org/2000/svg"
    26        viewBox="0 0 183.34 249.26"
    27      >
    28        <g>
    29          <g>
    30            <path d="M91.73,0C111.2,28.89,116.2,60,108,93.53l.47.07,26.22-32.69c1,1.38,1.92,2.65,2.83,3.93C144.65,75,151.8,85.23,159.05,95.36c2.25,3.15,4.94,6,7.2,9.11A90,90,0,0,1,182,142.06a91.18,91.18,0,0,1,1.14,21.87,90.07,90.07,0,0,1-14,42.68,91.33,91.33,0,0,1-15.84,18.8,7.06,7.06,0,0,0-.47-.91q-9-12.25-18.07-24.49a1,1,0,0,1,.06-1.59,64.9,64.9,0,0,0,12.31-19.12,56.68,56.68,0,0,0,3.73-17.66A56,56,0,0,0,147.21,137c-8.27-20.69-23.34-33.59-45.31-37.63A59,59,0,0,0,35.1,140a57.72,57.72,0,0,0-2.72,19.39,59.23,59.23,0,0,0,45,55.79c15,3.68,29.46,2.11,43-5.66a5.93,5.93,0,0,1,.56-.29c.11-.05.24-.08.52-.18l19.31,26.19c-3.34,1.77-6.51,3.58-9.78,5.18a87.67,87.67,0,0,1-26.55,8,92.12,92.12,0,0,1-22.14.37,89.24,89.24,0,0,1-34.75-10.89A91.79,91.79,0,0,1,13.31,205,90.85,90.85,0,0,1,1.23,172.75a88.49,88.49,0,0,1-1-21.25c1.25-18,7.51-34.14,18-48.77Q50.82,57.46,83.13,12C86,8.09,88.76,4.15,91.73,0Z" />
    31            <path d="M134.92,157.67a43.24,43.24,0,1,1-43.07-43.22A43.16,43.16,0,0,1,134.92,157.67Z" />
    32          </g>
    33        </g>
    34      </svg>
    35    );
    36  }
    37  
    38  const Icon = ({
    39    isFolder,
    40    isSelected,
    41  }: {
    42    isFolder: boolean;
    43    isSelected: boolean;
    44  }) => {
    45    if (isFolder) {
    46      return (
    47        <FontAwesomeIcon
    48          className={styles.itemIcon}
    49          icon={isSelected ? faFolderOpen : faFolder}
    50        />
    51      );
    52    }
    53    return <Logo className={styles.pyroscopeLogo} />;
    54  };
    55  
    56  const SelectButton = ({
    57    name,
    58    fullList,
    59    isSelected,
    60    onClick,
    61  }: SelectButtonProps) => {
    62    const isFolder = fullList.indexOf(name) === -1;
    63  
    64    return (
    65      <button
    66        role={MENU_ITEM_ROLE}
    67        onClick={onClick}
    68        className={cx(styles.button, isSelected && styles.isSelected)}
    69        title={name}
    70      >
    71        <div>
    72          <Icon isFolder={isFolder} isSelected={isSelected} />
    73          <div className={styles.appName}>{name}</div>
    74        </div>
    75        <div>
    76          {isFolder ? (
    77            <FontAwesomeIcon className={styles.chevron} icon={faAngleRight} />
    78          ) : null}
    79        </div>
    80      </button>
    81    );
    82  };
    83  
    84  export default SelectButton;