import React from "react"; import { Skeleton, useColorModeValue, useTheme, useToken, } from "@chakra-ui/react"; import { ClassNames } from "@emotion/react"; import { Link } from "react-router-dom"; import { safeImageUrl, useCommonStyles } from "../util"; function SquareItemCard({ item, ...props }) { const outlineShadowValue = useToken("shadows", "outline"); return ( {({ css }) => ( // SquareItemCard renders in large lists of 1k+ items, so we get a big // perf win by using Emotion directly instead of Chakra's styled-system // Box. } /> )} ); } function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) { const { brightBackground } = useCommonStyles(); const brightBackgroundValue = useToken("colors", brightBackground); const theme = useTheme(); return ( // SquareItemCard renders in large lists of 1k+ items, so we get a big perf // win by using Emotion directly instead of Chakra's styled-system Box. {({ css }) => (
{thumbnailImage}
{name}
)}
); } function ItemThumbnail({ item }) { const mdRadiusValue = useToken("radii", "md"); const badgeBackground = useColorModeValue( item.isNc ? "purple.100" : "gray.100", item.isNc ? "purple.500" : "gray.500" ); const badgeColor = useColorModeValue( item.isNc ? "purple.500" : "gray.500", item.isNc ? "purple.100" : "gray.100" ); const thumbnailShadowColor = useColorModeValue( item.isNc ? "purple.200" : "gray.200", item.isNc ? "purple.600" : "gray.600" ); const [ badgeBackgroundValue, badgeColorValue, thumbnailShadowColorValue, ] = useToken("colors", [badgeBackground, badgeColor, thumbnailShadowColor]); return ( {({ css }) => (
{`Thumbnail {item.isNc != null && (
*/ 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" : "NP"}
)}
)}
); } export function SquareItemCardSkeleton({ minHeightNumLines }) { return ( {minHeightNumLines >= 3 && ( )} } thumbnailImage={} minHeightNumLines={minHeightNumLines} /> ); } export default SquareItemCard;