import React from "react"; import { ClassNames } from "@emotion/react"; import { Badge, Box, SimpleGrid, Tooltip, Wrap, WrapItem, useColorModeValue, useTheme, } from "@chakra-ui/react"; import { CheckIcon, EditIcon, NotAllowedIcon, StarIcon, } from "@chakra-ui/icons"; import { HiSparkles } from "react-icons/hi"; import SquareItemCard from "./SquareItemCard"; import { safeImageUrl, useCommonStyles } from "../util"; import usePreferArchive from "./usePreferArchive"; function ItemCard({ item, badges, variant = "list", ...props }) { const { brightBackground } = useCommonStyles(); switch (variant) { case "grid": return ; case "list": return ( ); default: throw new Error(`Unexpected ItemCard variant: ${variant}`); } } export function ItemCardContent({ item, badges, isWorn, isDisabled, itemNameId, focusSelector, }) { return ( {item.name} {badges} ); } /** * ItemThumbnail shows a small preview image for the item, including some * hover/focus and worn/unworn states. */ export function ItemThumbnail({ item, size = "md", isActive, isDisabled, focusSelector, ...props }) { const [preferArchive] = usePreferArchive(); const theme = useTheme(); const borderColor = useColorModeValue( theme.colors.green["700"], "transparent", ); const focusBorderColor = useColorModeValue( theme.colors.green["600"], "transparent", ); return ( {({ css }) => ( {/* If the item is still loading, wait with an empty box. */} {item && ( )} )} ); } /** * ItemName shows the item's name, including some hover/focus and worn/unworn * states. */ function ItemName({ children, isDisabled, focusSelector, ...props }) { const theme = useTheme(); return ( {({ css }) => ( {children} )} ); } export function ItemCardList({ children }) { return ( {children} ); } export function ItemBadgeList({ children, ...props }) { return ( {React.Children.map( children, (badge) => badge && {badge}, )} ); } export function ItemBadgeTooltip({ label, children }) { return ( {label}} placement="top" openDelay={400} > {children} ); } export const NcBadge = React.forwardRef(({ isEditButton, ...props }, ref) => { return ( NC {isEditButton && } ); }); export const NpBadge = React.forwardRef(({ isEditButton, ...props }, ref) => { return ( NP {isEditButton && } ); }); export const PbBadge = React.forwardRef(({ isEditButton, ...props }, ref) => { return ( PB {isEditButton && } ); }); export const ItemKindBadge = React.forwardRef( ({ isNc, isPb, isEditButton, ...props }, ref) => { if (isNc) { return ; } else if (isPb) { return ; } else { return ; } }, ); export function YouOwnThisBadge({ variant = "long" }) { let badge = ( {variant === "medium" && Own} {variant === "long" && You own this!} ); if (variant === "short" || variant === "medium") { badge = ( {badge} ); } return badge; } export function YouWantThisBadge({ variant = "long" }) { let badge = ( {variant === "medium" && Want} {variant === "long" && You want this!} ); if (variant === "short" || variant === "medium") { badge = ( {badge} ); } return badge; } function ZoneBadge({ variant, zoneLabel }) { // Shorten the label when necessary, to make the badges less bulky const shorthand = zoneLabel .replace("Background Item", "BG Item") .replace("Foreground Item", "FG Item") .replace("Lower-body", "Lower") .replace("Upper-body", "Upper") .replace("Transient", "Trans") .replace("Biology", "Bio"); if (variant === "restricts") { return ( {shorthand} ); } if (shorthand !== zoneLabel) { return ( {shorthand} ); } return {shorthand}; } export function getZoneBadges(zones, propsForAllBadges) { // Get the sorted zone labels. Sometimes an item occupies multiple zones of // the same name, so it's important to de-duplicate them! let labels = zones.map((z) => z.label); labels = new Set(labels); labels = [...labels].sort(); return labels.map((label) => ( )); } export function MaybeAnimatedBadge() { return ( ); } export default ItemCard;