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

     1  import React, { useState } from 'react';
     2  import { Tabs, Tab, TabPanel } from '../webapp/javascript/ui/Tabs';
     3  
     4  const LIGHT_COLOR_MODE = 'Light Color Mode';
     5  
     6  export default {
     7    title: 'Components/Tabs',
     8    args: {
     9      [LIGHT_COLOR_MODE]: false,
    10    },
    11  };
    12  
    13  export const tabs = (props) => {
    14    const [value, setTab] = useState(0);
    15  
    16    return (
    17      <body
    18        style={{ padding: 20 }}
    19        data-theme={props[LIGHT_COLOR_MODE] ? 'light' : 'dark'}
    20      >
    21        <Tabs value={value} onChange={(e, value) => setTab(value)}>
    22          <Tab label="Tab_1" />
    23          <Tab label="Tab_2" />
    24        </Tabs>
    25        <TabPanel value={value} index={0}>
    26          Tab_1_Content
    27        </TabPanel>
    28        <TabPanel value={value} index={1}>
    29          Tab_2_Content
    30        </TabPanel>
    31      </body>
    32    );
    33  };