first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
export default function BasicModal() {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic Modal
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
onClick={handleOpen}
|
||||
variant="contained"
|
||||
className="whiteColor"
|
||||
>
|
||||
Open Modal
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style} className="bg-black">
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Modal>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '@mui/material/Button';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
||||
'& .MuiDialogContent-root': {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
'& .MuiDialogActions-root': {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
function BootstrapDialogTitle(props) {
|
||||
const { children, onClose, ...other } = props;
|
||||
|
||||
return (
|
||||
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||
{children}
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</DialogTitle>
|
||||
);
|
||||
}
|
||||
|
||||
BootstrapDialogTitle.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default function CustomizationDialog() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Customization Dialog
|
||||
</Typography>
|
||||
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Open dialog
|
||||
</Button>
|
||||
|
||||
<BootstrapDialog
|
||||
onClose={handleClose}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={open}
|
||||
>
|
||||
<div className="bg-black">
|
||||
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose}>
|
||||
Modal title
|
||||
</BootstrapDialogTitle>
|
||||
|
||||
<DialogContent dividers>
|
||||
<Typography gutterBottom>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
|
||||
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
|
||||
consectetur ac, vestibulum at eros.
|
||||
</Typography>
|
||||
|
||||
<Typography gutterBottom>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
||||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</Typography>
|
||||
|
||||
<Typography gutterBottom>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
|
||||
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
|
||||
ullamcorper nulla non metus auctor fringilla.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button autoFocus onClick={handleClose}>
|
||||
Save changes
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</div>
|
||||
</BootstrapDialog>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import List from '@mui/material/List';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
const Transition = React.forwardRef(function Transition(props, ref) {
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
export default function FullScreenDialogs() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Full Screen Dialog
|
||||
</Typography>
|
||||
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Open full-screen dialog
|
||||
</Button>
|
||||
|
||||
<Dialog
|
||||
fullScreen
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={handleClose}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||
Sound
|
||||
</Typography>
|
||||
<Button autoFocus color="inherit" onClick={handleClose}>
|
||||
save
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<List>
|
||||
<ListItem button>
|
||||
<ListItemText primary="Phone ringtone" secondary="Titania" />
|
||||
</ListItem>
|
||||
<Divider />
|
||||
<ListItem button>
|
||||
<ListItemText
|
||||
primary="Default notification ringtone"
|
||||
secondary="Tethys"
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
pt: 2,
|
||||
px: 4,
|
||||
pb: 3,
|
||||
};
|
||||
|
||||
function ChildModal() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button onClick={handleOpen}>Open Child Modal</Button>
|
||||
<Modal
|
||||
hideBackdrop
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="child-modal-title"
|
||||
aria-describedby="child-modal-description"
|
||||
>
|
||||
<Box sx={{ ...style, width: 200 }}>
|
||||
<h2 id="child-modal-title">Text in a child modal</h2>
|
||||
<p id="child-modal-description">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<Button onClick={handleClose}>Close Child Modal</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NestedModal() {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Nested Modal
|
||||
</Typography>
|
||||
|
||||
<Button onClick={handleOpen} variant="contained" className="whiteColor">Open Modal</Button>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="parent-modal-title"
|
||||
aria-describedby="parent-modal-description"
|
||||
>
|
||||
<Box sx={{ ...style, width: 400 }}>
|
||||
<h2 id="parent-modal-title">Text in a modal</h2>
|
||||
<p id="parent-modal-description">
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</p>
|
||||
<ChildModal />
|
||||
</Box>
|
||||
</Modal>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
|
||||
export default function ScrollingLongContent() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [scroll, setScroll] = React.useState('paper');
|
||||
|
||||
const handleClickOpen = (scrollType) => () => {
|
||||
setOpen(true);
|
||||
setScroll(scrollType);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const descriptionElementRef = React.useRef(null);
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
const { current: descriptionElement } = descriptionElementRef;
|
||||
if (descriptionElement !== null) {
|
||||
descriptionElement.focus();
|
||||
}
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Scrolling Long Content
|
||||
</Typography>
|
||||
|
||||
<Button onClick={handleClickOpen('paper')}>scroll=paper</Button>
|
||||
|
||||
<Button onClick={handleClickOpen('body')}>scroll=body</Button>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
scroll={scroll}
|
||||
aria-labelledby="scroll-dialog-title"
|
||||
aria-describedby="scroll-dialog-description"
|
||||
>
|
||||
<div className='bg-black'>
|
||||
<DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
|
||||
|
||||
<DialogContent dividers={scroll === 'paper'}>
|
||||
<DialogContentText
|
||||
id="scroll-dialog-description"
|
||||
ref={descriptionElementRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{[...new Array(50)]
|
||||
.map(
|
||||
() => `Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
|
||||
)
|
||||
.join('\n')}
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>Cancel</Button>
|
||||
<Button onClick={handleClose}>Subscribe</Button>
|
||||
</DialogActions>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '@mui/material/Button';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemAvatar from '@mui/material/ListItemAvatar';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { blue } from '@mui/material/colors';
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
const emails = ['username@gmail.com', 'user02@gmail.com'];
|
||||
|
||||
function SimpleDialog(props) {
|
||||
const { onClose, selectedValue, open } = props;
|
||||
|
||||
const handleClose = () => {
|
||||
onClose(selectedValue);
|
||||
};
|
||||
|
||||
const handleListItemClick = (value) => {
|
||||
onClose(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog onClose={handleClose} open={open}>
|
||||
<div className="bg-black">
|
||||
<DialogTitle>Set backup account</DialogTitle>
|
||||
|
||||
<List sx={{ pt: 0 }}>
|
||||
{emails.map((email) => (
|
||||
<ListItem disableGutters>
|
||||
<ListItemButton onClick={() => handleListItemClick(email)} key={email}>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: blue[100], color: blue[500] }}>
|
||||
<PersonIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={email} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
|
||||
<ListItem disableGutters>
|
||||
<ListItemButton
|
||||
autoFocus
|
||||
onClick={() => handleListItemClick('addAccount')}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<AddIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Add account" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
SimpleDialog.propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
open: PropTypes.bool.isRequired,
|
||||
selectedValue: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default function SimpleDialogDemo() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [selectedValue, setSelectedValue] = React.useState(emails[1]);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = (value) => {
|
||||
setOpen(false);
|
||||
setSelectedValue(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Simple Dialog
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Typography variant="subtitle1" component="div">
|
||||
Selected: {selectedValue}
|
||||
</Typography>
|
||||
<br />
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Open simple dialog
|
||||
</Button>
|
||||
<SimpleDialog
|
||||
selectedValue={selectedValue}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import Box from '@mui/material/Box';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Fade from '@mui/material/Fade';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
export default function Transitions() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Transitions
|
||||
</Typography>
|
||||
|
||||
<Button onClick={handleOpen} variant="contained" className="whiteColor">Open Modal</Button>
|
||||
|
||||
<Modal
|
||||
aria-labelledby="transition-modal-title"
|
||||
aria-describedby="transition-modal-description"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
closeAfterTransition
|
||||
BackdropComponent={Backdrop}
|
||||
BackdropProps={{
|
||||
timeout: 500,
|
||||
}}
|
||||
>
|
||||
<Fade in={open}>
|
||||
<Box sx={style} className="bg-black">
|
||||
<Typography id="transition-modal-title" variant="h6" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
<Typography id="transition-modal-description" sx={{ mt: 2 }}>
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Fade>
|
||||
</Modal>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
const Transition = React.forwardRef(function Transition(props, ref) {
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
export default function TransitionsDialog() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Transitions Dialog
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Slide in alert dialog
|
||||
</Button>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
TransitionComponent={Transition}
|
||||
keepMounted
|
||||
onClose={handleClose}
|
||||
aria-describedby="alert-dialog-slide-description"
|
||||
>
|
||||
<div className="bg-black">
|
||||
<DialogTitle>{"Use Google's location service?"}</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-slide-description">
|
||||
Let Google help apps determine location. This means sending anonymous
|
||||
location data to Google, even when no apps are running.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>Disagree</Button>
|
||||
<Button onClick={handleClose}>Agree</Button>
|
||||
</DialogActions>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user