Files
react-test/docs/data/joy/components/modal/BasicModalDialog.js
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

52 lines
1.6 KiB
JavaScript

import * as React from 'react';
import Button from '@mui/joy/Button';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Input from '@mui/joy/Input';
import Modal from '@mui/joy/Modal';
import ModalDialog from '@mui/joy/ModalDialog';
import DialogTitle from '@mui/joy/DialogTitle';
import DialogContent from '@mui/joy/DialogContent';
import Stack from '@mui/joy/Stack';
import Add from '@mui/icons-material/Add';
export default function BasicModalDialog() {
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<Button
variant="outlined"
color="neutral"
startDecorator={<Add />}
onClick={() => setOpen(true)}
>
New project
</Button>
<Modal open={open} onClose={() => setOpen(false)}>
<ModalDialog>
<DialogTitle>Create new project</DialogTitle>
<DialogContent>Fill in the information of the project.</DialogContent>
<form
onSubmit={(event) => {
event.preventDefault();
setOpen(false);
}}
>
<Stack spacing={2}>
<FormControl>
<FormLabel>Name</FormLabel>
<Input autoFocus required />
</FormControl>
<FormControl>
<FormLabel>Description</FormLabel>
<Input required />
</FormControl>
<Button type="submit">Submit</Button>
</Stack>
</form>
</ModalDialog>
</Modal>
</React.Fragment>
);
}