import React from "react";
import { css } from "emotion";
import {
Badge,
Box,
Image,
SimpleGrid,
Tooltip,
Wrap,
useColorModeValue,
useTheme,
} from "@chakra-ui/core";
import { StarIcon } from "@chakra-ui/icons";
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.
*/
function ItemThumbnail({ src, isWorn, isDisabled, focusSelector }) {
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 }) {
return (
{children}
);
}
export function ItemBadgeTooltip({ label, children }) {
return (
{label}}
placement="top"
openDelay={400}
>
{children}
);
}
export function NcBadge() {
return (
NC
);
}
export function NpBadge() {
return (
NP
);
}
export function YouOwnThisBadge() {
return (
You own this!
);
}
export function YouWantThisBadge() {
return (
You want this!
);
}
export default ItemCard;