OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

update to new Chakra <Wrap> API

Browse source
This commit is contained in:
Emi Matchu 2020-12-25 09:17:24 -08:00
parent b023cbeaf9
commit 91982c60d9
2 changed files with 68 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
src/app/UserItemsPage.js
View file

@ -16,6 +16,7 @@ import {
MenuList, MenuList,
Portal, Portal,
Wrap, Wrap,
WrapItem,
VStack, VStack,
useBreakpointValue, useBreakpointValue,
useToast, useToast,
@ -156,34 +157,44 @@ function UserItemsPage() {
</Heading1> </Heading1>
<Wrap spacing="2" opacity="0.7"> <Wrap spacing="2" opacity="0.7">
{data.user.contactNeopetsUsername && ( {data.user.contactNeopetsUsername && (
<Badge <WrapItem>
as="a" <Badge
href={`http://www.neopets.com/userlookup.phtml?user=${data.user.contactNeopetsUsername}`} as="a"
display="flex" href={`http://www.neopets.com/userlookup.phtml?user=${data.user.contactNeopetsUsername}`}
alignItems="center" display="flex"
> alignItems="center"
<NeopetsStarIcon marginRight="1" /> >
{data.user.contactNeopetsUsername} <NeopetsStarIcon marginRight="1" />
</Badge> {data.user.contactNeopetsUsername}
</Badge>
</WrapItem>
)} )}
{data.user.contactNeopetsUsername && ( {data.user.contactNeopetsUsername && (
<Badge <WrapItem>
as="a" <Badge
href={`http://www.neopets.com/neomessages.phtml?type=send&recipient=${data.user.contactNeopetsUsername}`} as="a"
display="flex" href={`http://www.neopets.com/neomessages.phtml?type=send&recipient=${data.user.contactNeopetsUsername}`}
alignItems="center" display="flex"
> alignItems="center"
<EmailIcon marginRight="1" /> >
Neomail <EmailIcon marginRight="1" />
</Badge> Neomail
</Badge>
</WrapItem>
)} )}
<SupportOnly> <SupportOnly>
<UserSupportMenu user={data.user}> <WrapItem>
<MenuButton as={BadgeButton} display="flex" alignItems="center"> <UserSupportMenu user={data.user}>
<EditIcon marginRight="1" /> <MenuButton
Support as={BadgeButton}
</MenuButton> display="flex"
</UserSupportMenu> alignItems="center"
>
<EditIcon marginRight="1" />
Support
</MenuButton>
</UserSupportMenu>
</WrapItem>
</SupportOnly> </SupportOnly>
{/* Usually I put "Own" before "Want", but this matches the natural {/* Usually I put "Own" before "Want", but this matches the natural
* order on the page: the _matches_ for things you want are things * order on the page: the _matches_ for things you want are things
@ -191,32 +202,36 @@ function UserItemsPage() {
* more natural train of thought: you come to someone's list _wanting_ * more natural train of thought: you come to someone's list _wanting_
* something, and _then_ thinking about what you can offer. */} * something, and _then_ thinking about what you can offer. */}
{!isCurrentUser && numItemsTheyOwnThatYouWant > 0 && ( {!isCurrentUser && numItemsTheyOwnThatYouWant > 0 && (
<Badge <WrapItem>
as="a" <Badge
href="#owned-items" as="a"
colorScheme="blue" href="#owned-items"
display="flex" colorScheme="blue"
alignItems="center" display="flex"
> alignItems="center"
<StarIcon marginRight="1" /> >
{numItemsTheyOwnThatYouWant > 1 <StarIcon marginRight="1" />
? `${numItemsTheyOwnThatYouWant} items you want` {numItemsTheyOwnThatYouWant > 1
: "1 item you want"} ? `${numItemsTheyOwnThatYouWant} items you want`
</Badge> : "1 item you want"}
</Badge>
</WrapItem>
)} )}
{!isCurrentUser && numItemsTheyWantThatYouOwn > 0 && ( {!isCurrentUser && numItemsTheyWantThatYouOwn > 0 && (
<Badge <WrapItem>
as="a" <Badge
href="#wanted-items" as="a"
colorScheme="green" href="#wanted-items"
display="flex" colorScheme="green"
alignItems="center" display="flex"
> alignItems="center"
<CheckIcon marginRight="1" /> >
{numItemsTheyWantThatYouOwn > 1 <CheckIcon marginRight="1" />
? `${numItemsTheyWantThatYouOwn} items you own` {numItemsTheyWantThatYouOwn > 1
: "1 item you own"} ? `${numItemsTheyWantThatYouOwn} items you own`
</Badge> : "1 item you own"}
</Badge>
</WrapItem>
)} )}
</Wrap> </Wrap>
</Box> </Box>

6
src/app/components/ItemCard.js
View file

@ -6,6 +6,7 @@ import {
SimpleGrid, SimpleGrid,
Tooltip, Tooltip,
Wrap, Wrap,
WrapItem,
useColorModeValue, useColorModeValue,
useTheme, useTheme,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
@ -203,7 +204,10 @@ export function ItemCardList({ children }) {
export function ItemBadgeList({ children, ...props }) { export function ItemBadgeList({ children, ...props }) {
return ( return (
<Wrap spacing="2" opacity="0.7" {...props}> <Wrap spacing="2" opacity="0.7" {...props}>
{children} {React.Children.map(
children,
(badge) => badge && <WrapItem>{badge}</WrapItem>
)}
</Wrap> </Wrap>
); );
} }