React MUI Floating Action Button

import React from "react";
import Fab from "@mui/material/Fab";
import Github from "@mui/icons-material/GitHub";
import Linkedin from "@mui/icons-material/LinkedIn";

function App() {
    return (
        <div>
            <div style={{ 
                textAlign: "center", 
                color: "green" 
            }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Floating action button</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Fab color="success">
                    <Github />
                </Fab>
                <Fab color="primary">
                    <Linkedin />
                </Fab>
            </div>
        </div>
    );
}

export default App;

import React from "react";
import Fab from "@mui/material/Fab";
import { Facebook } from "@mui/icons-material";

function App() {
    return (
        <div>
            <div style={{ 
                textAlign: "center", 
                color: "green" 
            }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Floating action button</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Fab color="primary" 
                    style={{ marginRight: 5 }}>
                    <Facebook />
                </Fab>
                <Fab color="primary" size="medium" 
                    style={{ marginRight: 5 }}>
                    <Facebook />
                </Fab>
                <Fab color="primary" size="small">
                    <Facebook />
                </Fab>
            </div>
        </div>
    );
}

export default App;

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;