Files
my-bar/front/src/components/BarCreateModal.js

39 lines
1.5 KiB
JavaScript

import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import * as React from "react";
import {useState} from "react";
import Typography from "@mui/material/Typography";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
export function BarCreateModal({open, setOpen, create}) {
const [value, setValue] = useState("");
return (
<Dialog fullWidth={true}
open={open} onClose={() => setOpen(false)}
sx={{
'& .MuiDialog-paper': {
margin: '8px',
},
'& .MuiPaper-root': {
width: 'calc(100% - 16px)',
}
}}>
<DialogTitle>
<Typography>Создать список</Typography>
</DialogTitle>
<DialogContent>
<TextField sx={{width: '75%'}}
label={"Название списка"} variant='outlined'
value={!value ? "" : value}
onChange={(e) => setValue(e.target.value)}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => create(value)}>Создать</Button>
</DialogActions>
</Dialog>
)
}