@chakra-ui/react#LinkOverlay TypeScript Examples
The following examples show how to use
@chakra-ui/react#LinkOverlay.
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: PrivateApiWalkthrough.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
|
PrivateApiWalkthrough = (): JSX.Element => {
return (
<SlideFade in={true} offsetY='150px'>
<Box px={5}>
<Text fontSize='4xl'>Private API Setup (Advanced)</Text>
<Text fontSize='md' mt={5}>
You may already know this, but BlueBubbles is one of the only cross-platform iMessage solution that
supports sending reactions, replies, subjects, and effects. This is because we developed an Objective-C
library that allows us to interface with Apple's "private APIs". Normally, this is not possible, however,
after disabling your macOS device's SIP controls, these private APIs are made accessible.
</Text>
<Text fontSize='md' mt={5}>
If you would like to find out more information, please go to the link below:
</Text>
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} mt={5} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://docs.bluebubbles.app/private-api/
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/donate' target='_blank'>
Private API Documentation
</LinkOverlay>
</Heading>
<Text>
This documentation will go over the pros and cons to setting up the Private API. It will speak to
the risks of disabling SIP controls, as well as the full feature set that uses the Private API
</Text>
</LinkBox>
<Text fontSize='3xl' mt={5}>Configurations</Text>
<Alert status='info' mt={2}>
<AlertIcon />
Unless you know what you're doing, please make sure the following Private API Requirements all pass
before enabling the setting. Enabling this will automatically attempt to install the helper bundle
into MacForge or MySIMBL.
</Alert>
<Box mt={4} />
<PrivateApiField
helpText={'Note: If the plugins folder is missing, you may need to manually install the helper bundle'}
/>
</Box>
</SlideFade>
);
}
Example #2
| Source File: ApiLayout.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
ApiLayout = (): JSX.Element => {
const dialogRef = useRef(null);
const [dialogOpen, setDialogOpen] = useBoolean();
const webhooks = useAppSelector(state => state.webhookStore.webhooks);
return (
<Box p={3} borderRadius={10}>
<Flex flexDirection="column">
<Stack direction='column' p={5}>
<Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
<Text fontSize='2xl'>API</Text>
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>
<Text>
Learn how you can interact with the API to automate and orchestrate iMessage-related
actions. Our REST API gives you access to the underlying iMessage API in a
more succinct and easy to digest way. We also offer webhooks so you can receive
callbacks from the server.
</Text>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Divider orientation='horizontal' />
<Text>
BlueBubbles offers a high-level REST API to interact with the server, as well as iMessage itself.
With the API, you'll be able to send messages, fetch messages, filter chats, and more! To see what
else you can do in the API, please see the documentation below:
</Text>
<Spacer />
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://documenter.getpostman.com
</Text>
<Heading size='sm' mt={2}>
<LinkOverlay href='https://documenter.getpostman.com/view/765844/UV5RnfwM' target='_blank'>
Click to view API documentation
</LinkOverlay>
</Heading>
</LinkBox>
</Stack>
<Stack direction='column' p={5}>
<Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
<Text fontSize='2xl'>Webhooks</Text>
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>
<Text>
Any webhooks registered here will receive a POST request whenever an iMessage event
occurs. The body of the POST request will be a JSON payload containing the type of
event and the event data.
</Text>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Divider orientation='horizontal' />
<Spacer />
<Box>
<Menu>
<MenuButton
as={Button}
rightIcon={<BsChevronDown />}
width="12em"
>
Manage
</MenuButton>
<MenuList>
<MenuItem icon={<AiOutlinePlus />} onClick={setDialogOpen.on}>
Add Webhook
</MenuItem>
</MenuList>
</Menu>
</Box>
<Spacer />
<WebhooksTable webhooks={webhooks} />
</Stack>
</Flex>
<AddWebhookDialog
modalRef={dialogRef}
isOpen={dialogOpen}
onClose={() => setDialogOpen.off()}
/>
</Box>
);
}
Example #3
| Source File: GuidesLayout.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
GuidesLayout = (): JSX.Element => {
return (
<Box p={3} borderRadius={10}>
<Stack direction='column' p={5}>
<Text fontSize='2xl'>Help Guides & FAQ</Text>
<Divider orientation='horizontal' />
<Spacer />
<Text fontSize='md' my={5}>
In addition to the links in the navigation bar, use the links below to learn more about BlueBubbles and how to use it!
</Text>
<Spacer />
<Spacer />
<Wrap spacing='30px' mt={5}>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/install
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/install' target='_blank'>
Installation Guide
</LinkOverlay>
</Heading>
<Text>
Let us help walk you through the full setup of BlueBubbles. This guide will take you step
by step to learn how to setup Google FCM and the BlueBubbles Server.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://docs.bluebubbles.app
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://docs.bluebubbles.app' target='_blank'>
Documentation & User Guide
</LinkOverlay>
</Heading>
<Text>
Read about what BlueBubbles has to offer, how to set it up, and how to use the plethora
of features. This documentation also provides more links to other useful articles.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/faq
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/faq' target='_blank'>
FAQ
</LinkOverlay>
</Heading>
<Text>
If you have any questions, someone else has likely already asked them! View our frequently
asked questions to figure out how you may be able to solve an issue.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://docs.bluebubbles.app/private-api
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://docs.bluebubbles.app/private-api/installation' target='_blank'>
Private API Setup Guide
</LinkOverlay>
</Heading>
<Text>
If you want to have the ability to send reactions, replies, effects, subjects, etc. Read
this guide to figure out how to setup the Private API features.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://documenter.getpostman.com
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://documenter.getpostman.com/view/765844/UV5RnfwM' target='_blank'>
REST API
</LinkOverlay>
</Heading>
<Text>
If you're a developer looking to utilize the REST API to interact with iMessage in unique
ways, look no further. Perform automation, orchestration, or basic scripting!
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/web
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/web' target='_blank'>
BlueBubbles Web
</LinkOverlay>
</Heading>
<Text>
BlueBubbles is not limited to running on your Android device. It can also be run in your
browser so you can use it on the go! Connect it to this server once setup is complete.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://github.com/sponsors/BlueBubblesApp
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://github.com/sponsors/BlueBubblesApp' target='_blank'>
Sponsor Us
</LinkOverlay>
</Heading>
<Text>
Sponsor us by contributing a recurring donation to us, through GitHub. A monthly donation
is just another way to help support the developers and help maintain the project!
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='xs' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/donate
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/donate' target='_blank'>
Support Us
</LinkOverlay>
</Heading>
<Text>
BlueBubbles was created and is currently run by independent engineers in their free time.
Any sort of support is greatly appreciated! This can be monetary, or just a review.
</Text>
</LinkBox>
</WrapItem>
</Wrap>
</Stack>
</Box>
);
}
Example #4
| Source File: IntroWalkthrough.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
IntroWalkthrough = (): JSX.Element => {
return (
<SlideFade in={true} offsetY='150px'>
<Box px={5}>
<Text fontSize='4xl'>Welcome to BlueBubbles!</Text>
<Text fontSize='md' mt={5}>
Hey there, and welcome to the BlueBubbles Server! For starters, BlueBubbles is a cross-platform and
open-source ecosystem of apps, enabling the use of iMessage on Android, Web, and PC (Linux and Windows).
This Server App is the hub for all your connected devices; allowing you to send messages and receive
notifications as you would on an Apple device.
</Text>
<Text fontSize='3xl' mt={10}>Useful Resources</Text>
<Text fontSize='md' my={5}>
In addition to the links in the navigation bar, use the links below to learn more about BlueBubbles and how to use it!
</Text>
<Wrap spacing='10px'>
<WrapItem>
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/install
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/install' target='_blank'>
Installation Guide
</LinkOverlay>
</Heading>
<Text>
Let us help walk you through the full setup of BlueBubbles. This guide will take you step
by step to learn how to setup Google FCM and the BlueBubbles Server.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://docs.bluebubbles.app
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://docs.bluebubbles.app' target='_blank'>
Documentation & User Guide
</LinkOverlay>
</Heading>
<Text>
Read about what BlueBubbles has to offer, how to set it up, and how to use the plethora
of features. This documentation also provides more links to other useful articles.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://documenter.getpostman.com
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://documenter.getpostman.com/view/765844/UV5RnfwM' target='_blank'>
REST API
</LinkOverlay>
</Heading>
<Text>
If you're a developer looking to utilize the REST API to interact with iMessage in unique
ways, look no further. Perform automation, orchestration, or basic scripting!
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/faq
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/faq' target='_blank'>
FAQ
</LinkOverlay>
</Heading>
<Text>
If you have any questions, someone else has likely already asked them! View our frequently
asked questions to figure out how you may be able to solve an issue.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/web
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/web' target='_blank'>
BlueBubbles Web
</LinkOverlay>
</Heading>
<Text>
BlueBubbles is not limited to running on your Android device. It can also be run in your
browser so you can use it on the go! Connect it to this server once setup is complete.
</Text>
</LinkBox>
</WrapItem>
<WrapItem>
<LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} borderWidth='1px' rounded='xl'>
<Text color='gray'>
https://bluebubbles.app/donate
</Text>
<Heading size='md' my={2}>
<LinkOverlay href='https://bluebubbles.app/donate' target='_blank'>
Support Us
</LinkOverlay>
</Heading>
<Text>
BlueBubbles was created and is currently run by independent engineers in their free time.
Any sort of support is greatly appreciated! This can be monetary, or just a review.
</Text>
</LinkBox>
</WrapItem>
</Wrap>
</Box>
</SlideFade>
);
}
