import React from
"react"
;
import SwipeableViews from
"react-swipeable-views"
;
import { useTheme } from
"@mui/material/styles"
;
import AppBar from
"@mui/material/AppBar"
;
import Tabs from
"@mui/material/Tabs"
;
import Tab from
"@mui/material/Tab"
;
import Typography from
"@mui/material/Typography"
;
import Zoom from
"@mui/material/Zoom"
;
import Fab from
"@mui/material/Fab"
;
import AddIcon from
"@mui/icons-material/Add"
;
import DeleteIcon from
"@mui/icons-material/Delete"
;
import Box from
"@mui/material/Box"
;
function
GeekTabPanel(props) {
const { children: child, value, index } = props;
return
(
<Typography role=
"tabpanel"
hidden={value !== index}>
{value === index && <Box sx={{ p: 3 }}>{child}</Box>}
</Typography>
);
}
function
alProps(index) {
return
{
id: `action-tab-${index}`,
"aria-controls"
: `action-tabpanel-${index}`,
};
}
const Style = {
position:
"absolute"
,
bottom: 16,
right: 16,
};
function
App() {
const theme = useTheme();
const [val, setVal] = React.useState(0);
const handleChange = (event, newValue) => {
setVal(newValue);
};
const handleChangeIndex = (index) => {
setVal(index);
};
const fabcomponent = [
{
color:
"success"
,
sx: Style,
icon: <AddIcon />,
label:
"Add"
,
},
{
color:
"error"
,
sx: Style,
icon: <DeleteIcon />,
label:
"Delete"
,
},
];
return
(
<div>
<div style={{ textAlign:
"center"
, color:
"green"
}}>
<h1>GeeksforGeeks</h1>
<h2>React MUI Floating Action Button</h2>
</div>
<center>
<Box
sx={{
bgcolor:
"#CCFFCF"
,
width: 500,
position:
"relative"
,
minHeight: 200,
}}
>
<AppBar position=
"static"
color=
"default"
>
<Tabs
value={val}
onChange={handleChange}
indicatorColor=
"primary"
textColor=
"primary"
>
<Tab label=
"Add"
{...alProps(0)} />
<Tab label=
"Delete"
{...alProps(1)} />
</Tabs>
</AppBar>
<SwipeableViews
axis={theme.direction ===
"rtl"
?
"x-reverse"
:
"x"
}
index={val}
onChangeIndex={handleChangeIndex}
>
<GeekTabPanel value={val} index={0}
dir={theme.direction}>
Add an Item
</GeekTabPanel>
<GeekTabPanel value={val} index={1}
dir={theme.direction}>
Delete an Item
</GeekTabPanel>
</SwipeableViews>
{fabcomponent.map((fab, index) => (
<Zoom
key={fab.color}
in
={val === index}
>
<Fab sx={fab.sx} color={fab.color}>
{fab.icon}
</Fab>
</Zoom>
))}
</Box>
</center>
</div>
);
}
export
default
App;