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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import {
Flex,
Stack,
StackProps,
Heading as ChakraHeading,
Text,
} from "@chakra-ui/react";
import { Assembly } from "@jsii/spec";
import type { FunctionComponent } from "react";
import { SelectVersion } from "./SelectVersion";
import { mapConstructFrameworks } from "../../../api/catalog-search/util";
import { Metadata } from "../../../api/package/metadata";
import { CDKTypeBadge } from "../../../components/CDKType";
import { PackageTag } from "../../../components/PackageTag";
import { tagObjectsFrom } from "../../../util/package";
import { PACKAGE_ANALYTICS } from "../constants";
import testIds from "../testIds";
interface HeadingProps extends StackProps {
assembly: Assembly;
name: string;
description?: string;
metadata: Metadata;
version: string;
}
export const Heading: FunctionComponent<HeadingProps> = ({
assembly,
name,
description,
metadata,
version,
...stackProps
}) => {
const tags = tagObjectsFrom({
packageTags: metadata?.packageTags ?? [],
keywords: assembly?.keywords ?? [],
});
const constructFrameworks = mapConstructFrameworks(metadata);
const [constructFramework] = constructFrameworks;
const [cdkName, majorVersion] = constructFramework ?? [];
const dataEvent =
constructFrameworks.size === 1
? PACKAGE_ANALYTICS.CDK_BADGE.eventName(
`${cdkName}${majorVersion !== undefined ? ` v${majorVersion}` : ""}`
)
: undefined;
return (
<Stack
lineHeight="1.5"
maxW="full"
overflow="hidden"
spacing={2}
{...stackProps}
>
<Flex align="center" wrap="wrap">
<ChakraHeading
color="textPrimary"
flexShrink={1}
fontSize="1.5rem"
isTruncated
mr={4}
>
{name}
</ChakraHeading>
<SelectVersion />
</Flex>
<Text data-testid={testIds.description} fontSize="1rem">
{description}
</Text>
<Flex
align="center"
direction="row"
pt={1}
// Chakra doesn't yet support css gap via style props
sx={{ gap: "0.5rem" }}
wrap="wrap"
>
<CDKTypeBadge
constructFrameworks={constructFrameworks}
data-event={dataEvent}
/>
{tags.map(({ id, keyword: { label, color } = {} }) => (
<PackageTag
data-event={PACKAGE_ANALYTICS.KEYWORD.eventName(label!)}
key={id}
value={id}
variant={color}
>
{label}
</PackageTag>
))}
</Flex>
</Stack>
);
};
|