@chakra-ui/react#Wrap TypeScript Examples
The following examples show how to use
@chakra-ui/react#Wrap.
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: index.tsx From calories-in with MIT License | 6 votes |
|
function SelectedFoods({ selection }: Props) {
const { selectedItems: selectedFoods } = selection
const { foodsById } = useFoods()
return (
<Flex alignItems="center" minHeight="56px">
{selectedFoods.length > 0 ? (
<Wrap spacing={2}>
{selectedFoods.map(({ id }) => (
<SelectedFoodItem
key={id}
food={foodsById[id]}
onUnselect={selection.toggleItem}
/>
))}
</Wrap>
) : (
<Text textColor="gray.500">Select one or more foods</Text>
)}
</Flex>
)
}
Example #2
| 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 #3
| 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>
);
}
Example #4
| Source File: Header.tsx From lucide with ISC License | 4 votes |
|
Header = ({ data }: HeaderProps) => {
const [zippingIcons, setZippingIcons] = useState(false);
const { iconsRef } = useCustomizeIconContext();
const downloadAllIcons = async () => {
console.log(iconsRef);
setZippingIcons(true);
let iconEntries: IconContent[] = Object.entries(iconsRef.current).map(([name, svgEl]) => [
name,
svgEl.outerHTML,
]);
// Fallback
if (iconEntries.length === 0) {
iconEntries = data.map(icon => [icon.name, icon.src]);
}
const zip = await generateZip(iconEntries);
download(zip, 'lucide.zip');
setZippingIcons(false);
};
const repositoryUrl = 'https://github.com/lucide-icons/lucide';
const packages = [
{
name: 'lucide',
Logo: JSLogo,
href: '/docs/lucide',
},
{
name: 'lucide-react',
Logo: ReactLogo,
href: '/docs/lucide-react',
},
{
name: 'lucide-vue',
Logo: VueLogo,
href: '/docs/lucide-vue',
},
{
name: 'lucide-vue-next',
Logo: Vue3Logo,
href: '/docs/lucide-vue-next',
},
{
name: 'lucide-svelte',
Logo: SvelteLogo,
href: '/docs/lucide-svelte',
},
{
name: 'lucide-preact',
Logo: PreactLogo,
href: '/docs/lucide-preact',
},
{
name: 'lucide-angular',
Logo: AngularLogo,
href: '/docs/lucide-angular',
},
{
name: 'lucide-flutter',
Logo: FlutterLogo,
href: '/docs/lucide-flutter',
},
{
name: 'lucide-laravel',
Logo: LaravelLogo,
href: 'https://github.com/mallardduck/blade-lucide-icons',
},
];
return (
<Flex direction="column" align="center" justify="center">
<Heading as="h1" fontSize="4xl" mb="4" textAlign="center">
Beautiful & consistent icon toolkit made by the community.
</Heading>
<Text fontSize="lg" as="p" textAlign="center" mb="1">
Open-source project and a fork of{' '}
<Link href="https://github.com/feathericons/feather" isExternal>
Feather Icons
</Link>
. <br />
We're expanding the icon set as much as possible while keeping it nice-looking -{' '}
<Link href={repositoryUrl} isExternal>
join us
</Link>
!
</Text>
<Wrap
marginTop={4}
marginBottom={6}
spacing={{ base: 4, lg: 6 }}
justify="center"
align="center"
>
<WrapItem flexBasis="100%" style={{ marginBottom: 0 }}>
<NextLink href="/packages" passHref>
<Link _hover={{ opacity: 0.8 }} marginX="auto">
<Text fontSize="md" opacity={0.5} as="p" textAlign="center" width="100%">
Available for:
</Text>
</Link>
</NextLink>
</WrapItem>
{packages.map(({ name, href, Logo }) => (
<WrapItem key={name}>
<NextLink href={href} key={name} passHref>
<Link _hover={{ opacity: 0.8 }}>
<Logo />
</Link>
</NextLink>
</WrapItem>
))}
</Wrap>
<Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
<WrapItem>
<Button
leftIcon={<Download />}
size="lg"
onClick={downloadAllIcons}
isLoading={zippingIcons}
loadingText="Creating zip.."
>
Download all
</Button>
</WrapItem>
<WrapItem>
<IconCustomizerDrawer />
</WrapItem>
<WrapItem>
<Button
as="a"
leftIcon={<Github />}
size="lg"
href={repositoryUrl}
target="__blank"
onClick={downloadAllIcons}
>
Github
</Button>
</WrapItem>
</Wrap>
</Flex>
);
}
Example #5
| Source File: PublicPiggybankPage.tsx From coindrop with GNU General Public License v3.0 | 4 votes |
|
PublicPiggybankPage: FunctionComponent = () => {
const { query: { piggybankName } } = useRouter();
const { piggybankDbData } = useContext(PublicPiggybankDataContext);
const theme = useTheme();
const { user } = useUser();
const { colorMode } = useColorMode();
const accentColorLevelInitial = getAccentColorLevelInitial(colorMode);
const accentColorLevelHover = getAccentColorLevelHover(colorMode);
const {
name,
website,
accentColor = "orange",
verb,
owner_uid,
} = piggybankDbData;
const accentColorInitial = theme.colors[accentColor][accentColorLevelInitial];
const accentColorHover = theme.colors[accentColor][accentColorLevelHover];
const pagePaymentMethodsDataEntries = Object.entries(piggybankDbData.paymentMethods ?? {});
const preferredAddresses = pagePaymentMethodsDataEntries.filter(([, paymentMethodData]: any) => paymentMethodData.isPreferred);
const otherAddresses = pagePaymentMethodsDataEntries.filter(([, paymentMethodData]: any) => !paymentMethodData.isPreferred);
const WrapGroup: FunctionComponent = ({ children }) => (
<Wrap
justify="center"
>
{children}
</Wrap>
);
type PaymentMethodButtonsFromEntriesProps = {
entries: PaymentMethodDbObjEntry[]
}
const PaymentMethodButtonsFromEntries: FunctionComponent<PaymentMethodButtonsFromEntriesProps> = ({ entries }) => (
<WrapGroup>
{entries
.sort(sortArrayByEntriesKeyAlphabetical)
.map(([paymentMethodId, paymentMethodData]) => (
<WrapItem key={paymentMethodId}>
<PaymentMethodButton
key={paymentMethodId}
paymentMethod={paymentMethodId}
paymentMethodValue={paymentMethodData.address}
isPreferred={paymentMethodData.isPreferred}
accentColor={accentColor}
/>
</WrapItem>
))}
</WrapGroup>
);
const piggybankExists = !!owner_uid;
const initialSetupComplete = name && accentColor && verb && pagePaymentMethodsDataEntries.length > 0;
return (
<>
<NextSeo
title={`${name ?? piggybankName}'s Coindrop (coindrop.to/${piggybankName})`}
description={`Send money to ${name} with no fees`}
/>
<Container
maxW={theme.breakpoints.lg}
mx="auto"
>
{user?.id
&& user.id === owner_uid
&& (
<>
<DataRefetcher />
<ManagePiggybankBar
editButtonOptions={
initialSetupComplete
? ({
text: 'Configure',
color: undefined,
icon: <SettingsIcon />,
}) : ({
text: 'Set up',
color: 'green',
icon: <SettingsIcon />,
})
}
initialSetupComplete={initialSetupComplete}
/>
</>
)}
{initialSetupComplete ? (
<Box
mb={6}
>
<Box
padding="10px"
my={2}
mx={3}
>
<Center>
<Avatar />
</Center>
<Heading textAlign="center">
Choose a payment method to
{` ${verb} `}
{website ? (
<Link href={website} target="_blank" rel="noreferrer">
<Heading
as="span"
color={accentColorInitial}
textDecoration="underline"
css={css`
&:hover {
color: ${accentColorHover};
}
`}
>
{name}
</Heading>
</Link>
) : (
<Heading
as="span"
color={accentColorInitial}
>
{name}
</Heading>
)}
:
</Heading>
</Box>
<PaymentMethodButtonsFromEntries
entries={preferredAddresses}
/>
<PaymentMethodButtonsFromEntries
entries={otherAddresses}
/>
<PoweredByCoindropLink />
</Box>
) : (
<Heading mt={4} textAlign="center">
{piggybankExists ? 'This Coindrop has not been set up yet.' : 'This Coindrop does not exist'}
{/* TODO: Include action buttons to log in or landing page */}
</Heading>
)}
</Container>
</>
);
}
