update to new Chakra <Wrap> API

src/app/UserItemsPage.js

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

src/app/components/ItemCard.js

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