wiki-tabs.tsx

import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab } from "@mui/material";
import React from "react";
import { Sources } from "./wiki-sources";
import { WikiDown } from "./Wiki-downloads";

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="Wiki Guide & Downloads" value="1" />
              <Tab label="Other Resources" value="2" />
              
            </TabList>
          </Box>
   
          <TabPanel value="1"> <WikiDown/>  </TabPanel>
          <TabPanel value="2">  <Sources/> </TabPanel>
        </TabContext>
      </Box>
    );
  }