import { Helmet } from 'react-helmet-async' ; import PageTitle from 'src/components/PageTitle' ; import PageTitleWrapper from 'src/components/PageTitleWrapper' ; import { Container , Grid , Card , CardHeader , CardContent , Divider } from '@mui/material' ; import { useState , SyntheticEvent } from 'react' ; import Tabs from '@mui/material/Tabs' ; import Tab from '@mui/material/Tab' ; import Typography from '@mui/material/Typography' ; import Box from '@mui/material/Box' ; import Footer from 'src/components/Footer' ; interface TabPanelProps { children ? : React . ReactNode ; index : number ; value : number ; } function TabPanel ( props ) { const { children , value , index , ... other } = props ; return ( < div role = "tabpanel" hidden = { value !== index } id = { `simple-tabpanel-${ index }` } aria - labelledby = { `simple-tab-${ index }` } { ... other } > { value === index && ( < Box sx = { { p : 3 } } > < Typography > { children } < /Typography> < /Box>)} < /div>); } function a11yProps ( index ) { return { id : `simple-tab-${ index }` , 'aria-controls' : `simple-tabpanel-${ index }` , } ; } function TabsDemo ( ) { const [ value , setValue ] = useState ( 0 ) ; const handleChange = ( event , newValue ) => { setValue ( newValue ) ; } ; return ( < > < Helmet > < title > Tabs - Components < /title> < /Helmet> < PageTitleWrapper > < PageTitle heading = "Tabs" subHeading = "Tabs make it easy to explore and switch between different views." docs = "https://material-ui.com/components/tabs/" / > < /PageTitleWrapper> < Container maxWidth = "lg" > < Grid container direction = "row" justifyContent = "center" alignItems = "stretch" spacing = { 3 } > < Grid item xs = { 12 } > < Card > < CardHeader title = "Basic Example" / > < Divider /> < CardContent > < Box sx = { { width : '100%' } } > < Tabs variant = "scrollable" scrollButtons = "auto" textColor = "primary" indicatorColor = "primary" value = { value } onChange = { handleChange } aria - label = "basic tabs example" > < Tab label = "Item One" { ... a11yProps ( 0 ) } /> < Tab label = "Item Two" { ... a11yProps ( 1 ) } /> < Tab label = "Item Three" { ... a11yProps ( 2 ) } /> < /Tabs> < TabPanel value = { value } index = { 0 } > Item One < /TabPanel> < TabPanel value = { value } index = { 1 } > Item Two < /TabPanel> < TabPanel value = { value } index = { 2 } > Item Three < /TabPanel> < /Box> < /CardContent> < /Card> < /Grid> < /Grid> < /Container> < Footer / > < />); } export default TabsDemo ;