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 103 104 105 106 | import {
Badge,
BadgeProps,
forwardRef,
Text,
TextProps,
Tooltip,
} from "@chakra-ui/react";
import { CDKType, CDKTYPE_RENDER_MAP } from "../../constants/constructs";
import { getSearchPath } from "../../util/url";
import { NavLink } from "../NavLink";
interface CDKTypeTextProps extends TextProps {
name?: CDKType;
majorVersion?: number;
}
const getText = ({
name,
majorVersion,
}: {
name: CDKType;
majorVersion?: number;
}) =>
`${CDKTYPE_RENDER_MAP[name].name}${
majorVersion !== undefined ? ` v${majorVersion}` : ""
}`;
const CDKTypeText = forwardRef<CDKTypeTextProps, "p">(
({ name, majorVersion, ...props }, ref) => {
if (!name) return null;
return (
<Text ref={ref} {...props}>
{getText({ name, majorVersion })}
</Text>
);
}
);
export interface CDKTypeBadgeProps extends BadgeProps {
constructFrameworks?: Map<CDKType, number | null>;
}
const badgeColorMap = {
[CDKType.awscdk]: "#CF4A02",
[CDKType.cdk8s]: "#005797",
[CDKType.cdktf]: "#5C4EE5",
};
const sharedProps = {
alignItems: "center",
borderRadius: "md",
display: "flex",
h: "1.5rem",
maxW: "5.5rem",
px: 1.5,
textTransform: "none" as const,
};
export const CDKTypeBadge = forwardRef<CDKTypeBadgeProps, "span">(
({ constructFrameworks, ...badgeProps }, ref) => {
if (!constructFrameworks?.size) return null;
// If "multi-cdk" library, show a Multi-CDK badge with tooltip which lists supported libraries
if (constructFrameworks.size > 1) {
const frameworks = [...constructFrameworks.entries()];
return (
<Tooltip
hasArrow
label={`Supports: ${frameworks
.map(([name, majorVersion]) =>
getText({ name, majorVersion: majorVersion ?? undefined })
)
.join(", ")}`}
placement="left-start"
>
<Badge {...sharedProps} colorScheme="brand" {...badgeProps}>
Multi-CDK
</Badge>
</Tooltip>
);
}
const [[name, majorVersion]] = constructFrameworks;
const bg = badgeColorMap[name];
return (
<Badge
{...sharedProps}
as={NavLink}
bg={bg}
color="white"
ref={ref}
to={getSearchPath({
cdkType: name,
cdkMajor: majorVersion ?? undefined,
})}
{...badgeProps}
>
<CDKTypeText majorVersion={majorVersion ?? undefined} name={name} />
</Badge>
);
}
);
|