@chakra-ui/react#PopoverFooter TypeScript Examples
The following examples show how to use
@chakra-ui/react#PopoverFooter.
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: Popover.tsx From calories-in with MIT License | 6 votes |
|
function Popover() {
const selectRef = useRef<HTMLSelectElement>(null)
return (
<PopoverBase placement="left" initialFocusRef={selectRef}>
{({ onClose }) => {
return (
<>
<PopoverTrigger>
<Trigger />
</PopoverTrigger>
<PopoverContent boxShadow="lg">
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Filters</PopoverHeader>
<PopoverBody>
<Content selectRef={selectRef} />
</PopoverBody>
<PopoverFooter border="0">
<Footer onClose={onClose} />
</PopoverFooter>
</PopoverContent>
</>
)
}}
</PopoverBase>
)
}
Example #2
| Source File: Hustlers.tsx From dope-monorepo with GNU General Public License v3.0 | 5 votes |
|
Hustlers = () => {
const [hustlers, setHustlers] = React.useState<any>();
useEffect(() => {
if (!(window.ethereum as any)?.selectedAddress) return;
fetch(`https://api.dopewars.gg/wallets/${ethers.utils.getAddress(
(window.ethereum as any).selectedAddress,
)}/hustlers`).then(res => res.json()).then(res => setHustlers(res));
}, []);
return (
<div>
{hustlers ? <SimpleGrid columns={2} spacing={5} paddingBottom="8">
{
hustlers.map((hustler: any, i: number) =>
<VStack key={i}>
<Text paddingBottom="0px">
{hustler.id} {hustler.name ? " - " + hustler.name : ""}
</Text>
<object width="70%" type="image/svg+xml" data={hustler.svg} />
{ localStorage.getItem(`gameSelectedHustler_${(window.ethereum as any).selectedAddress}`) !== hustler.id ? <Popover>
<PopoverTrigger>
<Button variant="primary">
Set as selected hustler
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Are you sure?</PopoverHeader>
<PopoverBody>The game needs to be reloaded in order to modify your selected hustler</PopoverBody>
<PopoverFooter>
<Button variant="primary" onClick={() => {
localStorage.setItem(`gameSelectedHustler_${(window.ethereum as any).selectedAddress}`, hustler.id);
window.location.reload();
}}>
Confirm
</Button>
</PopoverFooter>
</PopoverContent>
</Popover> : undefined }
</VStack>
)
}
</SimpleGrid> : <Center padding="4">
<Spinner size="lg"/>
</Center>
}
<Center>
<a href="/inventory">
<Button variant="primary">
Details
</Button>
</a>
</Center>
</div>
)
}
Example #3
| 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>
)
}
