2023-06-16 22:09:44 -03:00

129 lines
6.0 KiB
TypeScript

const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react";
export default function App() {
const {isOpen, onOpen, onOpenChange} = useDisclosure();
const [scrollBehavior, setScrollBehavior] = React.useState("inside");
return (
<div className="flex flex-col gap-2">
<RadioGroup
label="Select scroll behavior"
orientation="horizontal"
value={scrollBehavior}
onValueChange={setScrollBehavior}
>
<Radio value="inside">inside</Radio>
<Radio value="outside">outside</Radio>
</RadioGroup>
<Button onPress={onOpen}>Open Modal</Button>
<Modal
isOpen={isOpen}
onOpenChange={onOpenChange}
scrollBehavior={scrollBehavior}
>
<ModalContent>
{(onClose) => (
<>
<ModalHeader className="flex flex-col gap-1">
Modal Title
</ModalHeader>
<ModalBody>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam pulvinar risus non risus hendrerit venenatis.
Pellentesque sit amet hendrerit risus, sed porttitor quam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam pulvinar risus non risus hendrerit venenatis.
Pellentesque sit amet hendrerit risus, sed porttitor quam.
</p>
<p>
Magna exercitation reprehenderit magna aute tempor cupidatat
consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
incididunt cillum quis. Velit duis sit officia eiusmod Lorem
aliqua enim laboris do dolor eiusmod. Et mollit incididunt
nisi consectetur esse laborum eiusmod pariatur proident Lorem
eiusmod et. Culpa deserunt nostrud ad veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam pulvinar risus non risus hendrerit venenatis.
Pellentesque sit amet hendrerit risus, sed porttitor quam.
Magna exercitation reprehenderit magna aute tempor cupidatat
consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
incididunt cillum quis. Velit duis sit officia eiusmod Lorem
aliqua enim laboris do dolor eiusmod. Et mollit incididunt
nisi consectetur esse laborum eiusmod pariatur proident Lorem
eiusmod et. Culpa deserunt nostrud ad veniam.
</p>
<p>
Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
duis sit officia eiusmod Lorem aliqua enim laboris do dolor
eiusmod. Et mollit incididunt nisi consectetur esse laborum
eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam pulvinar risus non risus hendrerit
venenatis. Pellentesque sit amet hendrerit risus, sed
porttitor quam. Magna exercitation reprehenderit magna aute
tempor cupidatat consequat elit dolor adipisicing. Mollit
dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
mollit incididunt nisi consectetur esse laborum eiusmod
pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam pulvinar risus non risus hendrerit venenatis.
Pellentesque sit amet hendrerit risus, sed porttitor quam.
</p>
<p>
Magna exercitation reprehenderit magna aute tempor cupidatat
consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
incididunt cillum quis. Velit duis sit officia eiusmod Lorem
aliqua enim laboris do dolor eiusmod. Et mollit incididunt
nisi consectetur esse laborum eiusmod pariatur proident Lorem
eiusmod et. Culpa deserunt nostrud ad veniam.
</p>
<p>
Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
duis sit officia eiusmod Lorem aliqua enim laboris do dolor
eiusmod. Et mollit incididunt nisi consectetur esse laborum
eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam pulvinar risus non risus hendrerit
venenatis. Pellentesque sit amet hendrerit risus, sed
porttitor quam. Magna exercitation reprehenderit magna aute
tempor cupidatat consequat elit dolor adipisicing. Mollit
dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
mollit incididunt nisi consectetur esse laborum eiusmod
pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
veniam.
</p>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onClick={onClose}>
Close
</Button>
<Button color="primary" onPress={onClose}>
Action
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};