import React from "react"; import { Box, IconButton, Skeleton, useColorModeValue, useTheme, useToken, } from "@chakra-ui/react"; import { ClassNames } from "@emotion/react"; import { safeImageUrl, useCommonStyles } from "../util"; import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons"; import usePreferArchive from "./usePreferArchive"; function SquareItemCard({ item, showRemoveButton = false, onRemove = () => {}, tradeMatchingMode = null, footer = null, ...props }) { const outlineShadowValue = useToken("shadows", "outline"); const mdRadiusValue = useToken("radii", "md"); const tradeMatchOwnShadowColor = useColorModeValue("green.500", "green.200"); const tradeMatchWantShadowColor = useColorModeValue("blue.400", "blue.200"); const [tradeMatchOwnShadowColorValue, tradeMatchWantShadowColorValue] = useToken("colors", [tradeMatchOwnShadowColor, tradeMatchWantShadowColor]); // When this is a trade match, give it an extra colorful shadow highlight so // it stands out! (They'll generally be sorted to the front anyway, but this // make it easier to scan a user's lists page, and to learn how the sorting // works!) let tradeMatchShadow; if (tradeMatchingMode === "offering" && item.currentUserWantsThis) { tradeMatchShadow = `0 0 6px ${tradeMatchWantShadowColorValue}`; } else if (tradeMatchingMode === "seeking" && item.currentUserOwnsThis) { tradeMatchShadow = `0 0 6px ${tradeMatchOwnShadowColorValue}`; } else { tradeMatchShadow = null; } return ( {({ css }) => ( // SquareItemCard renders in large lists of 1k+ items, so we get a big // perf win by using Emotion directly instead of Chakra's styled-system // Box.
} removeButton={ showRemoveButton ? ( ) : null } boxShadow={tradeMatchShadow} footer={footer} /> {showRemoveButton && (
)}
)}
); } function SquareItemCardLayout({ name, thumbnailImage, footer, minHeightNumLines = 2, boxShadow = null, }) { const { brightBackground } = useCommonStyles(); const brightBackgroundValue = useToken("colors", brightBackground); const theme = useTheme(); return ( // SquareItemCard renders in large lists of 1k+ items, so we get a big perf // win by using Emotion directly instead of Chakra's styled-system Box. {({ css }) => (
{thumbnailImage}
{name}
{footer && ( {footer} )}
)}
); } function ItemThumbnail({ item, tradeMatchingMode }) { const [preferArchive] = usePreferArchive(); const kindColorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray"; const thumbnailShadowColor = useColorModeValue( `${kindColorScheme}.200`, `${kindColorScheme}.600` ); const thumbnailShadowColorValue = useToken("colors", thumbnailShadowColor); const mdRadiusValue = useToken("radii", "md"); // Normally, we just show the owns/wants badges depending on whether the // current user owns/wants it. But, in a trade list, we use trade-matching // mode instead: only show the badge if it represents a viable trade, and add // some extra flair to it, too! let showOwnsBadge; let showWantsBadge; let showTradeMatchFlair; if (tradeMatchingMode == null) { showOwnsBadge = item.currentUserOwnsThis; showWantsBadge = item.currentUserWantsThis; showTradeMatchFlair = false; } else if (tradeMatchingMode === "offering") { showOwnsBadge = false; showWantsBadge = item.currentUserWantsThis; showTradeMatchFlair = true; } else if (tradeMatchingMode === "seeking") { showOwnsBadge = item.currentUserOwnsThis; showWantsBadge = false; showTradeMatchFlair = true; } else if (tradeMatchingMode === "hide-all") { showOwnsBadge = false; showWantsBadge = false; showTradeMatchFlair = false; } else { throw new Error(`unexpected tradeMatchingMode ${tradeMatchingMode}`); } return ( {({ css }) => (
{`Thumbnail
{showOwnsBadge && ( {showTradeMatchFlair && (
Match
)}
)} {showWantsBadge && ( {showTradeMatchFlair && (
Match
)}
)}
{item.isNc != null && (
{item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
)}
)}
); } function ItemOwnsWantsBadge({ colorScheme, children, label }) { const badgeBackground = useColorModeValue( `${colorScheme}.100`, `${colorScheme}.500` ); const badgeColor = useColorModeValue( `${colorScheme}.500`, `${colorScheme}.100` ); const [badgeBackgroundValue, badgeColorValue] = useToken("colors", [ badgeBackground, badgeColor, ]); return ( {({ css }) => (
*/ white-space: nowrap; vertical-align: middle; text-transform: uppercase; font-size: 0.65rem; font-weight: 700; background: ${badgeBackgroundValue}; color: ${badgeColorValue}; `} > {children}
)}
); } function ItemThumbnailKindBadge({ colorScheme, children }) { const badgeBackground = useColorModeValue( `${colorScheme}.100`, `${colorScheme}.500` ); const badgeColor = useColorModeValue( `${colorScheme}.500`, `${colorScheme}.100` ); const [badgeBackgroundValue, badgeColorValue] = useToken("colors", [ badgeBackground, badgeColor, ]); return ( {({ css }) => (
*/ white-space: nowrap; vertical-align: middle; padding-left: 0.25rem; padding-right: 0.25rem; text-transform: uppercase; font-size: 0.65rem; border-radius: 0.125rem; font-weight: 700; background: ${badgeBackgroundValue}; color: ${badgeColorValue}; `} > {children}
)}
); } function SquareItemCardRemoveButton({ onClick }) { const backgroundColor = useColorModeValue("gray.200", "gray.500"); return ( } size="xs" borderRadius="full" boxShadow="lg" backgroundColor={backgroundColor} onClick={onClick} _hover={{ // Override night mode's fade-out on hover opacity: 1, transform: "scale(1.15, 1.15)", }} _focus={{ transform: "scale(1.15, 1.15)", boxShadow: "outline", }} /> ); } export function SquareItemCardSkeleton({ minHeightNumLines, footer = null }) { return ( {minHeightNumLines >= 3 && ( )} } thumbnailImage={} minHeightNumLines={minHeightNumLines} footer={footer} /> ); } export default SquareItemCard;