github.com/grafana/pyroscope@v1.18.0/public/app/components/AppSelector/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  import styles from './SelectButton.module.scss';
     8  
     9  const cx = classNames.bind(styles);
    10  
    11  export const MENU_ITEM_ROLE = 'menuitem';
    12  
    13  interface SelectButtonProps {
    14    name: string;
    15    isSelected: boolean;
    16    onClick: () => void;
    17    icon: 'folder' | 'pyroscope';
    18  }
    19  
    20  function PyroscopeLogo({ className }: { className: string }) {
    21    return (
    22      <svg
    23        className={className}
    24        xmlns="http://www.w3.org/2000/svg"
    25        viewBox="0 0 183.34 249.26"
    26      >
    27        <g>
    28          <g>
    29            <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" />
    30            <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" />
    31          </g>
    32        </g>
    33      </svg>
    34    );
    35  }
    36  
    37  const Icon = ({
    38    isSelected,
    39    icon,
    40  }: {
    41    icon: SelectButtonProps['icon'];
    42    isSelected: boolean;
    43  }) => {
    44    if (icon === 'folder') {
    45      return (
    46        <FontAwesomeIcon
    47          className={styles.itemIcon}
    48          icon={isSelected ? faFolderOpen : faFolder}
    49        />
    50      );
    51    }
    52  
    53    return <PyroscopeLogo className={styles.pyroscopeLogo} />;
    54  };
    55  
    56  const SelectButton = ({
    57    icon,
    58    name,
    59    isSelected,
    60    onClick,
    61  }: SelectButtonProps) => {
    62    return (
    63      <button
    64        role={MENU_ITEM_ROLE}
    65        type="button"
    66        onClick={onClick}
    67        className={cx(styles.button, isSelected && styles.isSelected)}
    68        title={name}
    69      >
    70        <div>
    71          <Icon icon={icon} isSelected={isSelected} />
    72          <div className={styles.appName}>{name}</div>
    73        </div>
    74        <div>
    75          {icon === 'folder' ? (
    76            <FontAwesomeIcon className={styles.chevron} icon={faAngleRight} />
    77          ) : null}
    78        </div>
    79      </button>
    80    );
    81  };
    82  
    83  export default SelectButton;