72 lines
1.8 KiB
JavaScript
Executable File
72 lines
1.8 KiB
JavaScript
Executable File
/*!
|
|
|
|
=========================================================
|
|
* Argon Dashboard Chakra PRO - v1.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
|
|
* Designed and Coded by Simmmple & Creative Tim
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
|
|
*/
|
|
|
|
import {
|
|
Button,
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerCloseButton,
|
|
DrawerContent,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
Input,
|
|
useColorModeValue,
|
|
useDisclosure,
|
|
} from "@chakra-ui/react";
|
|
import { SettingsIcon } from "components/Icons/Icons";
|
|
import React from "react";
|
|
|
|
export function SettingsBar() {
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
// Chakra Color Mode
|
|
const navbarIcon = useColorModeValue("gray.500", "gray.200");
|
|
const settingsRef = React.useRef();
|
|
return (
|
|
<>
|
|
<SettingsIcon
|
|
ref={settingsRef}
|
|
onClick={onOpen}
|
|
color={navbarIcon}
|
|
w="18px"
|
|
h="18px"
|
|
/>
|
|
<Drawer
|
|
isOpen={isOpen}
|
|
placement="right"
|
|
onClose={onClose}
|
|
finalFocusRef={settingsRef}
|
|
>
|
|
<DrawerContent>
|
|
<DrawerCloseButton />
|
|
<DrawerHeader>Create your account</DrawerHeader>
|
|
|
|
<DrawerBody>
|
|
<Input variant="main" placeholder="Type here..." />
|
|
</DrawerBody>
|
|
|
|
<DrawerFooter>
|
|
<Button variant="outline" me={3} onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button colorScheme="blue">Save</Button>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
}
|