add item info links

This commit is contained in:
Matt Dunn-Rankin 2020-06-24 21:12:02 -07:00
parent ade563ddcd
commit 7baa48c356

View file

@ -40,15 +40,24 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
</ItemName> </ItemName>
</Box> </Box>
<Box flexGrow="1" /> <Box flexGrow="1" />
{isInOutfit && (
<Box> <Box>
<RemoveItemButton <ItemActionButton
icon="info"
label="More info"
href={`http://impress.openneo.net/items/${
item.id
}-${item.name.replace(/ /g, "-")}`}
/>
{isInOutfit && (
<ItemActionButton
icon="delete"
label="Remove"
onClick={() => onClick={() =>
dispatchToOutfit({ type: "removeItem", itemId: item.id }) dispatchToOutfit({ type: "removeItem", itemId: item.id })
} }
/> />
</Box>
)} )}
</Box>
</ItemContainer> </ItemContainer>
); );
} }
@ -179,25 +188,24 @@ function ItemName({ children, ...props }) {
} }
/** /**
* RemoveItemButton lets the user remove the item from the outfit altogether. * ItemActionButton is one of a list of actions a user can take for this item.
*
* This removes it from their "closet", which is even more severe than
* unwearing it: it disappears from your item list entirely, until you find it
* again via search!
*/ */
function RemoveItemButton({ onClick }) { function ItemActionButton({ icon, label, href, onClick }) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Tooltip label="Remove" placement="top"> <Tooltip label={label} placement="top">
<IconButton <IconButton
icon="delete" as={href ? "a" : "button"}
aria-label="Remove from outfit" icon={icon}
aria-label={label}
variant="ghost" variant="ghost"
color="gray.400" color="gray.400"
href={href}
target={href ? "_blank" : null}
onClick={(e) => { onClick={(e) => {
onClick(); if (onClick) onClick();
e.preventDefault(); e.stopPropagation();
}} }}
className={css` className={css`
opacity: 0; opacity: 0;