github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Tabs.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import {
     4    Tabs as MuiTabs,
     5    Tab as MuiTab,
     6    TabsProps,
     7    TabProps,
     8  } from '@mui/material';
     9  import styles from './Tabs.module.scss';
    10  
    11  interface TabPanelProps {
    12    index: number;
    13    value: number;
    14    children: React.ReactNode;
    15  }
    16  
    17  export function Tabs({ children, value, onChange }: TabsProps) {
    18    return (
    19      <MuiTabs
    20        TabIndicatorProps={{
    21          hidden: true, // hide indicator
    22        }}
    23        className={styles.tabs}
    24        value={value}
    25        onChange={onChange}
    26      >
    27        {children}
    28      </MuiTabs>
    29    );
    30  }
    31  
    32  export function Tab({ label, ...rest }: TabProps) {
    33    return (
    34      <MuiTab disableRipple className={styles.tab} {...rest} label={label} />
    35    );
    36  }
    37  
    38  export function TabPanel({ children, value, index, ...other }: TabPanelProps) {
    39    return (
    40      <div
    41        role="tabpanel"
    42        hidden={value !== index}
    43        id={`tabpanel-${index}`}
    44        aria-labelledby={`tab-${index}`}
    45        {...other}
    46      >
    47        {value === index && <div>{children}</div>}
    48      </div>
    49    );
    50  }