add item info links
This commit is contained in:
parent
ade563ddcd
commit
7baa48c356
1 changed files with 24 additions and 16 deletions
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue