diff --git a/src/app/HomePage.js b/src/app/HomePage.js index 3fe4404..0e357d2 100644 --- a/src/app/HomePage.js +++ b/src/app/HomePage.js @@ -379,9 +379,12 @@ function NewItemsSectionContent() { thumbnailUrl isNc isPb + currentUserOwnsThis + currentUserWantsThis } } - ` + `, + { context: { sendAuth: true } } ); if (loading) { diff --git a/src/app/ItemSearchPage.js b/src/app/ItemSearchPage.js index d679df0..ae54daf 100644 --- a/src/app/ItemSearchPage.js +++ b/src/app/ItemSearchPage.js @@ -147,6 +147,8 @@ function ItemSearchPageResults({ query: latestQuery, offset }) { thumbnailUrl isNc isPb + currentUserOwnsThis + currentUserWantsThis } } } diff --git a/src/app/UserItemsPage.js b/src/app/UserItemsPage.js index 7c4f8b3..37dc41e 100644 --- a/src/app/UserItemsPage.js +++ b/src/app/UserItemsPage.js @@ -602,7 +602,16 @@ function ClosetList({ closetList, isCurrentUser, showHeading }) { {sortedItems.map((item) => ( - + ))} diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js index d99eab6..ef282e2 100644 --- a/src/app/components/SquareItemCard.js +++ b/src/app/components/SquareItemCard.js @@ -9,8 +9,14 @@ import { ClassNames } from "@emotion/react"; import { Link } from "react-router-dom"; import { safeImageUrl, useCommonStyles } from "../util"; +import { CheckIcon, StarIcon } from "@chakra-ui/icons"; -function SquareItemCard({ item, ...props }) { +function SquareItemCard({ + item, + hideOwnsBadge = false, + hideWantsBadge = false, + ...props +}) { const outlineShadowValue = useToken("shadows", "outline"); return ( @@ -36,7 +42,13 @@ function SquareItemCard({ item, ...props }) { > } + thumbnailImage={ + + } /> )} @@ -92,7 +104,7 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) { ); } -function ItemThumbnail({ item }) { +function ItemThumbnail({ item, hideOwnsBadge, hideWantsBadge }) { const kindColorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray"; const thumbnailShadowColor = useColorModeValue( @@ -126,6 +138,27 @@ function ItemThumbnail({ item }) { `} loading="lazy" /> +
+ {!hideOwnsBadge && item.currentUserOwnsThis && ( + + + + )} + {!hideWantsBadge && item.currentUserWantsThis && ( + + + + )} +
{item.isNc != null && (
+ {({ css }) => ( +
*/ + white-space: nowrap; + vertical-align: middle; + padding-left: 0.25rem; + padding-right: 0.25rem; + text-transform: uppercase; + font-size: 0.65rem; + font-weight: 700; + background: ${badgeBackgroundValue}; + color: ${badgeColorValue}; + `} + > + {children} +
+ )} + + ); +} + function ItemThumbnailKindBadge({ colorScheme, children }) { const badgeBackground = useColorModeValue( `${colorScheme}.100`,