init project

docs/data/joy/components/modal/CloseModal.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalClose from '@mui/joy/ModalClose';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+
+export default function CloseModal() {
+  const [open, setOpen] = React.useState<boolean>(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Modal
+        aria-labelledby="close-modal-title"
+        open={open}
+        onClose={(_event: React.MouseEvent<HTMLButtonElement>, reason: string) => {
+          alert(`Reason: ${reason}`);
+          setOpen(false);
+        }}
+        sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      >
+        <Sheet variant="outlined" sx={{ minWidth: 300, borderRadius: 'md', p: 3 }}>
+          <ModalClose variant="outlined" />
+          <Typography
+            component="h2"
+            id="close-modal-title"
+            level="h4"
+            textColor="inherit"
+            sx={{ fontWeight: 'lg' }}
+          >
+            Modal title
+          </Typography>
+        </Sheet>
+      </Modal>
+    </React.Fragment>
+  );
+}