import React from "react";
import { css } from "emotion";
import {
Badge,
Box,
SimpleGrid,
Tooltip,
Wrap,
useColorModeValue,
useTheme,
} from "@chakra-ui/core";
import { CheckIcon, NotAllowedIcon, StarIcon } from "@chakra-ui/icons";
import { HiSparkles } from "react-icons/hi";
import { Link } from "react-router-dom";
import { safeImageUrl } from "../util";
function ItemCard({ item, badges, ...props }) {
const borderColor = useColorModeValue("gray.100", "green.500");
return (
);
}
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 theme = useTheme();
const borderColor = useColorModeValue(
theme.colors.green["700"],
"transparent"
);
const focusBorderColor = useColorModeValue(
theme.colors.green["600"],
"transparent"
);
return (
);
}
/**
* ItemName shows the item's name, including some hover/focus and worn/unworn
* states.
*/
function ItemName({ children, isDisabled, focusSelector, ...props }) {
const theme = useTheme();
return (
{children}
);
}
export function ItemCardList({ children }) {
return (
{children}
);
}
export function ItemBadgeList({ children, ...props }) {
return (
{children}
);
}
export function ItemBadgeTooltip({ label, children }) {
return (
{label}}
placement="top"
openDelay={400}
>
{children}
);
}
export function NcBadge() {
return (
NC
);
}
export function NpBadge() {
// NOTE: display:block helps with some layout consistency, overriding the
// default of inline-block.
return (
NP
);
}
export function YouOwnThisBadge({ variant = "long" }) {
let badge = (
{variant === "long" && You own this!}
);
if (variant === "short") {
badge = {badge};
}
return badge;
}
export function YouWantThisBadge({ variant = "long" }) {
let badge = (
{variant === "long" && You want this!}
);
if (variant === "short") {
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;