Untitled

import React, { useState } from 'react';
import { Box, Typography, Tab, Tabs } from '@mui/material';
import "./CustomTabs.css";
import { MyCalendar } from '../../containers/App/async_loader';
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
import TaskAltIcon from '@mui/icons-material/TaskAlt';
import RecommendIcon from '@mui/icons-material/Recommend';
import Recommend from './Recommend';
import PersonIcon from '@mui/icons-material/Person';
import FamilyRestroomIcon from '@mui/icons-material/FamilyRestroom';
import AddHomeWorkIcon from '@mui/icons-material/AddHomeWork';
import ReceiptIcon from '@mui/icons-material/Receipt';
import PersonalCalendar from './PersonalCalendar';
import FamilyCalender from './FamilyCalender';
import WorkCalender from './WorkCalender';
import BillCalendar from './BillCalendar';
import TaskCalendar from './TaskCalendar';
import ProfessionalCalender from './ProfessionalCalender';
import GoogleCalendar from './GoogleCalendar';

const CustomTabs = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue === value ? false : newValue);
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
      <div className="tabscustometab">
        <input type="radio" name="tabs" id="tabone" defaultChecked />

        <label className='tabscustometablabel' htmlFor="tabone" style={{fontSize:"12px"}}>
          <QuestionAnswerIcon sx={{ fontSize: 14 }} className='tabiconsss' /> Request</label>
        <div className="tab">
          {<MyCalendar />}
        </div>

        <input type="radio" name="tabs" id="tabtwo" />
        <label htmlFor="tabtwo" style={{fontSize:"12px"}}>
          <TaskAltIcon sx={{ fontSize: 12 }} className='tabiconsss' /> Task</label>
        <div className="tab">
          <TaskCalendar />

        </div>

        <input type="radio" name="tabs" id="tabfour" />
        <label htmlFor="tabfour" style={{fontSize:"12px"}}>
          <PersonIcon sx={{ fontSize: 1 }} className='tabiconsss' /> Personal Calender</label>
        <div className="tab">
          {/* <PersonalCalendar/> */}
          {/* <GoogleCalendar/> */}
          <ProfessionalCalender />
        </div>
        {/* 
      <input type="radio" name="tabs" id="tabthree" />
      <label htmlFor="tabthree">
      <RecommendIcon sx={{fontSize:17}} className='tabiconsss'/> Recommendation</label>
      <div className="tab">
      {<Recommend/>}
      </div>

      

      <input type="radio" name="tabs" id="tabfive" />
      <label htmlFor="tabfive">
      <FamilyRestroomIcon sx={{fontSize:17}} className='tabiconsss'/> Family Calender</label>
      <div className="tab">
      <FamilyCalender/>

      </div>
      <input type="radio" name="tabs" id="tabsix" />
      <label htmlFor="tabsix">
      <AddHomeWorkIcon sx={{fontSize:17}} className='tabiconsss'/> Work Calender</label>
      <div className="tab">
      <WorkCalender/>
      </div>

      <input type="radio" name="tabs" id="tabseven" />
      <label htmlFor="tabseven">
      <ReceiptIcon sx={{fontSize:17}} className='tabiconsss'/> Bills Calender</label>
      <div className="tab">
      <BillCalendar/>
      </div> */}

      </div>
    </Box>
  );
};

export default CustomTabs;