@chakra-ui/react#LightMode TypeScript Examples
The following examples show how to use
@chakra-ui/react#LightMode.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: HeaderMenu.tsx From openchakra with MIT License | 5 votes |
HeaderMenu = () => {
return (
<Menu placement="bottom">
<CustomMenuButton
rightIcon={<ChevronDownIcon path="" />}
size="xs"
variant="ghost"
colorScheme="gray"
>
Editor
</CustomMenuButton>
<Portal>
<LightMode>
<MenuList bg="white" zIndex={999}>
{process.env.NEXT_PUBLIC_IS_V1 && (
<MenuItemLink isExternal href="https://v0.openchakra.app">
<Box mr={2} as={GoArchive} />
Chakra v0 Editor
</MenuItemLink>
)}
<ExportMenuItem />
<ImportMenuItem />
<MenuDivider />
<MenuItemLink
isExternal
href="https://chakra-ui.com/getting-started"
>
<Box mr={2} as={GoRepo} />
Chakra UI Docs
</MenuItemLink>
<MenuItemLink href="https://github.com/premieroctet/openchakra/issues">
<Box mr={2} as={FaBomb} />
Report issue
</MenuItemLink>
</MenuList>
</LightMode>
</Portal>
</Menu>
)
}
Example #2
Source File: Header.tsx From openchakra with MIT License | 4 votes |
Header = () => {
const showLayout = useSelector(getShowLayout)
const showCode = useSelector(getShowCode)
const dispatch = useDispatch()
return (
<DarkMode>
<Flex
justifyContent="space-between"
bg="#1a202c"
as="header"
height="3rem"
px="1rem"
>
<Flex
width="14rem"
height="100%"
backgroundColor="#1a202c"
color="white"
as="a"
fontSize="xl"
flexDirection="row"
alignItems="center"
aria-label="Chakra UI, Back to homepage"
>
<Box fontSize="2xl" as={AiFillThunderbolt} mr={1} color="teal.100" />{' '}
<Box fontWeight="bold">open</Box>chakra
</Flex>
<Flex flexGrow={1} justifyContent="space-between" alignItems="center">
<HStack spacing={4} justify="center" align="center">
<Box>
<HeaderMenu />
</Box>
<FormControl flexDirection="row" display="flex" alignItems="center">
<Tooltip
zIndex={100}
hasArrow
bg="yellow.100"
aria-label="Builder mode help"
label="Builder mode adds extra padding/borders"
>
<FormLabel
cursor="help"
color="gray.200"
fontSize="xs"
htmlFor="preview"
pb={0}
mb={0}
mr={2}
whiteSpace="nowrap"
>
Builder mode
</FormLabel>
</Tooltip>
<LightMode>
<Switch
isChecked={showLayout}
colorScheme="teal"
size="sm"
onChange={() => dispatch.app.toggleBuilderMode()}
id="preview"
/>
</LightMode>
</FormControl>
<FormControl display="flex" flexDirection="row" alignItems="center">
<FormLabel
color="gray.200"
fontSize="xs"
mr={2}
mb={0}
htmlFor="code"
pb={0}
whiteSpace="nowrap"
>
Code panel
</FormLabel>
<LightMode>
<Switch
isChecked={showCode}
id="code"
colorScheme="teal"
onChange={() => dispatch.app.toggleCodePanel()}
size="sm"
/>
</LightMode>
</FormControl>
</HStack>
<Stack direction="row">
<CodeSandboxButton />
<Popover>
{({ onClose }) => (
<>
<PopoverTrigger>
<Button
ml={4}
rightIcon={<SmallCloseIcon path="" />}
size="xs"
variant="ghost"
>
Clear
</Button>
</PopoverTrigger>
<LightMode>
<PopoverContent zIndex={100} bg="white">
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Are you sure?</PopoverHeader>
<PopoverBody fontSize="sm">
Do you really want to remove all components on the
editor?
</PopoverBody>
<PopoverFooter display="flex" justifyContent="flex-end">
<Button
size="sm"
variant="ghost"
colorScheme="red"
rightIcon={<CheckIcon path="" />}
onClick={() => {
dispatch.components.reset()
if (onClose) {
onClose()
}
}}
>
Yes, clear
</Button>
</PopoverFooter>
</PopoverContent>
</LightMode>
</>
)}
</Popover>
</Stack>
</Flex>
<Stack
justifyContent="flex-end"
width="13rem"
align="center"
direction="row"
spacing="2"
>
<Link isExternal href="https://github.com/premieroctet/openchakra">
<Box as={DiGithubBadge} size={32} color="gray.200" />
</Link>
<Box lineHeight="shorter" color="white" fontSize="xs">
by{' '}
<Link isExternal href="https://premieroctet.com" color="teal.100">
Premier Octet
</Link>
</Box>
</Stack>
</Flex>
</DarkMode>
)
}