Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import { Button, Flex, Grid, Heading } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { HOME_ANALYTICS, SECTION_PADDING } from "./constants";
import testIds from "./testIds";
import { useSection } from "./useSection";
import { CatalogSearchSort } from "../../api/catalog-search/constants";
import { DEFAULT_FEATURED_PACKAGES } from "../../api/config";
import { NavLink } from "../../components/NavLink";
import { PackageCard } from "../../components/PackageCard";
import { eventName } from "../../contexts/Analytics";
import { useConfigValue } from "../../hooks/useConfigValue";
import { getSearchPath } from "../../util/url";
export const Featured: FunctionComponent = () => {
const homePackages = useConfigValue("featuredPackages");
const [featured = { name: "Recently Updated", showLastUpdated: 4 }] = (
homePackages ?? DEFAULT_FEATURED_PACKAGES
).sections;
const section = useSection(featured);
if (!section) {
return null;
}
return (
<Flex
color="white"
data-testid={testIds.featuredContainer}
direction="column"
px={SECTION_PADDING.X}
py={SECTION_PADDING.Y}
zIndex="0"
>
<Heading
as="h3"
data-testid={testIds.featuredHeader}
fontSize="1.5rem"
fontWeight="semibold"
lineHeight="lg"
>
{featured.name}
</Heading>
<Grid
data-testid={testIds.featuredGrid}
gap={4}
mt={8}
templateColumns={{ base: "1fr", xl: "1fr 1fr" }}
>
{section?.slice(0, 4).map((pkg) => (
<PackageCard
data-event={HOME_ANALYTICS.FEATURED}
key={pkg.name}
pkg={pkg}
/>
))}
</Grid>
<Button
as={NavLink}
boxShadow="md"
colorScheme="brand"
data-event={eventName(HOME_ANALYTICS.FEATURED, "See All")}
mx="auto"
my={8}
onClick={() => window.scrollTo(0, 0)}
to={getSearchPath({ sort: CatalogSearchSort.DownloadsDesc })}
>
See all constructs
</Button>
</Flex>
);
};
|