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

Extract NC/PB/NP badge in SquareItemCard

Browse source 
This is just a small refactor to make `ItemThumbnail` more workable, because I'm gonna start working in it!
This commit is contained in:
Emi Matchu 2021-06-08 00:29:31 -07:00
parent 9a30b8c43f
commit 4a22b50a77
1 changed files with 48 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/app/components/SquareItemCard.js
View file

@ -93,28 +93,14 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
}
function ItemThumbnail({ item }) {
const mdRadiusValue = useToken("radii", "md");
const kindColorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray";
const colorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray";
const badgeBackground = useColorModeValue(
`${colorScheme}.100`,
`${colorScheme}.500`
);
const badgeColor = useColorModeValue(
`${colorScheme}.500`,
`${colorScheme}.100`
);
const thumbnailShadowColor = useColorModeValue(
`${colorScheme}.200`,
`${colorScheme}.600`
`${kindColorScheme}.200`,
`${kindColorScheme}.600`
);
const [
badgeBackgroundValue,
badgeColorValue,
thumbnailShadowColorValue,
] = useToken("colors", [badgeBackground, badgeColor, thumbnailShadowColor]);
const thumbnailShadowColorValue = useToken("colors", thumbnailShadowColor);
const mdRadiusValue = useToken("radii", "md");
return (
<ClassNames>
@ -146,8 +132,40 @@ function ItemThumbnail({ item }) {
position: absolute;
bottom: -6px;
right: -3px;
`}
>
<ItemThumbnailKindBadge colorScheme={kindColorScheme}>
{item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
</ItemThumbnailKindBadge>
</div>
)}
</div>
)}
</ClassNames>
);
}
function ItemThumbnailKindBadge({ colorScheme, children }) {
const badgeBackground = useColorModeValue(
`${colorScheme}.100`,
`${colorScheme}.500`
);
const badgeColor = useColorModeValue(
`${colorScheme}.500`,
`${colorScheme}.100`
);
const [badgeBackgroundValue, badgeColorValue] = useToken("colors", [
badgeBackground,
badgeColor,
]);
return (
<ClassNames>
{({ css }) => (
<div
className={css`
/* Copied from Chakra <Badge> */
display: inline-block;
white-space: nowrap;
vertical-align: middle;
padding-left: 0.25rem;
@ -160,9 +178,7 @@ function ItemThumbnail({ item }) {
color: ${badgeColorValue};
`}
>
{item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
</div>
)}
{children}
</div>
)}
</ClassNames>