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

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

@ -93,28 +93,14 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
} }
function ItemThumbnail({ item }) { 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( const thumbnailShadowColor = useColorModeValue(
`${colorScheme}.200`, `${kindColorScheme}.200`,
`${colorScheme}.600` `${kindColorScheme}.600`
); );
const thumbnailShadowColorValue = useToken("colors", thumbnailShadowColor);
const [ const mdRadiusValue = useToken("radii", "md");
badgeBackgroundValue,
badgeColorValue,
thumbnailShadowColorValue,
] = useToken("colors", [badgeBackground, badgeColor, thumbnailShadowColor]);
return ( return (
<ClassNames> <ClassNames>
@ -146,21 +132,11 @@ function ItemThumbnail({ item }) {
position: absolute; position: absolute;
bottom: -6px; bottom: -6px;
right: -3px; right: -3px;
/* Copied from Chakra <Badge> */
display: inline-block;
white-space: nowrap;
vertical-align: middle;
padding-left: 0.25rem;
padding-right: 0.25rem;
text-transform: uppercase;
font-size: 0.65rem;
border-radius: 0.125rem;
font-weight: 700;
background: ${badgeBackgroundValue};
color: ${badgeColorValue};
`} `}
> >
{item.isNc ? "NC" : item.isPb ? "PB" : "NP"} <ItemThumbnailKindBadge colorScheme={kindColorScheme}>
{item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
</ItemThumbnailKindBadge>
</div> </div>
)} )}
</div> </div>
@ -169,6 +145,46 @@ function ItemThumbnail({ item }) {
); );
} }
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> */
white-space: nowrap;
vertical-align: middle;
padding-left: 0.25rem;
padding-right: 0.25rem;
text-transform: uppercase;
font-size: 0.65rem;
border-radius: 0.125rem;
font-weight: 700;
background: ${badgeBackgroundValue};
color: ${badgeColorValue};
`}
>
{children}
</div>
)}
</ClassNames>
);
}
export function SquareItemCardSkeleton({ minHeightNumLines }) { export function SquareItemCardSkeleton({ minHeightNumLines }) {
return ( return (
<SquareItemCardLayout <SquareItemCardLayout