OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

extract ItemList, and split out some of Item

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-22 04:01:24 -07:00
parent 075a6cfef4
commit 1f5a7e83e1
2 changed files with 85 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
app/src/ItemList.js Normal file
View file

@ -0,0 +1,84 @@
import React from "react";
import { Box, Image, PseudoBox, Stack } from "@chakra-ui/core";
function ItemList({ items, wornItemIds, onWearItem }) {
return (
<Stack spacing="3">
{items.map((item) => (
<Box key={item.id}>
<Item
item={item}
isWorn={wornItemIds.includes(item.id)}
onWear={() => onWearItem(item.id)}
/>
</Box>
))}
</Stack>
);
}
function Item({ item, isWorn, onWear }) {
return (
<PseudoBox
role="group"
d="flex"
alignItems="center"
cursor="pointer"
onClick={onWear}
>
<ItemThumbnail src={item.thumbnailSrc} isWorn={isWorn} />
<Box width="3" />
<ItemName isWorn={isWorn}>{item.name}</ItemName>
</PseudoBox>
);
}
function ItemThumbnail({ src, isWorn }) {
return (
<PseudoBox
rounded="lg"
boxShadow="md"
border="1px"
borderColor={isWorn ? "green.700" : "green.700"}
opacity={isWorn ? 1 : 0.7}
width="50px"
height="50px"
overflow="hidden"
transition="all 0.15s"
transformOrigin="center"
transform={isWorn ? null : "scale(0.8)"}
_groupHover={
!isWorn && {
opacity: 0.9,
transform: "scale(0.9)",
borderColor: "green.600",
}
}
>
<Image src={src} />
</PseudoBox>
);
}
function ItemName({ children, isWorn }) {
return (
<PseudoBox
fontSize="md"
fontWeight={isWorn && "bold"}
color="green.800"
transition="all 0.15s"
opacity={isWorn ? 1 : 0.8}
_groupHover={
!isWorn && {
color: "green.800",
fontWeight: "medium",
opacity: 0.9,
}
}
>
{children}
</PseudoBox>
);
}
export default ItemList;

69
app/src/WardrobePage.js
View file

@ -20,6 +20,7 @@ import {
useToast,
} from "@chakra-ui/core";
import ItemList from "./ItemList";
import useOutfitState from "./useOutfitState.js";
import { ITEMS } from "./data";
@ -252,74 +253,6 @@ function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
);
}
function ItemList({ items, wornItemIds, onWearItem }) {
return (
<Stack spacing="3">
{items.map((item) => (
<Box key={item.id}>
<Item
item={item}
isWorn={wornItemIds.includes(item.id)}
onWear={() => onWearItem(item.id)}
/>
</Box>
))}
</Stack>
);
}
function Item({ item, isWorn, onWear }) {
return (
<PseudoBox
role="group"
d="flex"
alignItems="center"
cursor="pointer"
onClick={onWear}
>
<PseudoBox
rounded="lg"
boxShadow="md"
border="1px"
borderColor={isWorn ? "green.700" : "green.700"}
opacity={isWorn ? 1 : 0.7}
width="50px"
height="50px"
overflow="hidden"
transition="all 0.15s"
transformOrigin="center"
transform={isWorn ? null : "scale(0.8)"}
_groupHover={
!isWorn && {
opacity: 0.9,
transform: "scale(0.9)",
borderColor: "green.600",
}
}
>
<Image src={item.thumbnailSrc} />
</PseudoBox>
<PseudoBox
marginLeft="3"
fontSize="md"
fontWeight={isWorn && "bold"}
color="green.800"
transition="all 0.15s"
opacity={isWorn ? 1 : 0.8}
_groupHover={
!isWorn && {
color: "green.800",
fontWeight: "medium",
opacity: 0.9,
}
}
>
{item.name}
</PseudoBox>
</PseudoBox>
);
}
function Heading1({ children, ...props }) {
return (
<Heading fontFamily="Delicious" fontWeight="800" size="2xl" {...props}>