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 | import {
Flex,
Heading as ChakraHeading,
LinkOverlay,
Text,
} from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { Link } from "react-router-dom";
import { EditorsNote } from "./EditorsNote";
import { usePackageCard } from "./PackageCard";
import testIds from "./testIds";
import { eventName } from "../../contexts/Analytics";
import { useLanguage } from "../../hooks/useLanguage";
import { getPackagePath } from "../../util/url";
import { CDKTypeBadge } from "../CDKType";
export const Heading: FunctionComponent = () => {
const [currentLanguage] = useLanguage();
const {
dataEvent,
description,
comment,
constructFrameworks,
name,
version,
} = usePackageCard();
return (
<>
<LinkOverlay
as={Link}
data-event={
dataEvent ? eventName(dataEvent, "Package Card", name) : undefined
}
to={getPackagePath({
name,
version,
language: currentLanguage,
})}
>
<Flex align="center">
<CDKTypeBadge
constructFrameworks={constructFrameworks}
mr={2}
zIndex={1}
/>
<ChakraHeading
as="h3"
color="textPrimary"
data-testid={testIds.title}
fontSize="md"
fontWeight="bold"
wordBreak="normal"
>
{name}
</ChakraHeading>
</Flex>
</LinkOverlay>
{comment ? (
<EditorsNote comment={comment} />
) : (
<Text
color="textPrimary"
data-testid={testIds.description}
fontSize="md"
lineHeight="tall"
noOfLines={4}
>
{description || "No description available."}
</Text>
)}
</>
);
};
|