Sha256: be2dd195c44478d3c05dcf9776f8697178051c6062e7ed5f8ea7e7d98ca3128d
Contents?: true
Size: 1.27 KB
Versions: 61
Compression:
Stored size: 1.27 KB
Contents
import React, { useState } from "react";
import { Button, Drawer, Flex } from "playbook-ui";
const useDrawer = (visible = false) => {
const [opened, setOpened] = useState(visible);
const toggle = () => setOpened(!opened);
return [opened, toggle];
};
const DrawerDefault = () => {
const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
return (
<>
<Flex wrap>
<Button
id="sm"
marginRight="md"
onClick={toggleDrawerLeftOpen}
>
{"Left Drawer"}
</Button>
<Button
marginRight="xl"
onClick={toggleDrawerRightOpen}
>
{"Right Drawer"}
</Button>
</Flex>
<Flex>
{/* Left Drawer */}
<Drawer
onClose={toggleDrawerLeftOpen}
opened={drawerLeftOpen}
size={"lg"}
>
Test me (Left Drawer)
</Drawer>
{/* Right Drawer */}
<Drawer
onClose={toggleDrawerRightOpen}
opened={drawerRightOpen}
placement={"right"}
size={"lg"}
>
Test me (Right Drawer)
</Drawer>
</Flex>
</>
);
};
export default DrawerDefault;
Version data entries
61 entries across 61 versions & 2 rubygems