wiki-tabs.tsx

import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab } from "@mui/material";
import React from "react";
import { Started } from "./wiki-start";
import { Sources } from "./wiki-sources";
import { Troubleshooting } from "./troubleshooting";
import { WikiOverview } from "./wiki-overview";

export function WikiTabs() {
    const [value, setValue] = React.useState('1');
  
    const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
      setValue(newValue);
    };
  
    return (
      <Box sx={{ width: '100%', typography: 'body1' }}>
        <TabContext value={value}>
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
            <TabList onChange={handleChange} aria-label="lab API tabs example">
              <Tab label="Overview" value="1" />
              <Tab label="Getting started" value="6" />
              <Tab label="Troubleshooting" value="2" />
              <Tab label="Components" value="3" />
              <Tab label="Downloads" value="4" />
              <Tab label="Resources" value="5" />
              
            </TabList>
          </Box>
          <TabPanel value="1"> <WikiOverview/>  </TabPanel>
          <TabPanel value="6"> <Started/>  </TabPanel>
          <TabPanel value="2"> <Troubleshooting/> </TabPanel>
          <TabPanel value="3">  </TabPanel>
          <TabPanel value="4">   </TabPanel>
          <TabPanel value="5">  <Sources/> </TabPanel>
        </TabContext>
      </Box>
    );
  }