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 | import type { FunctionComponent } from "react";
import { Link } from "react-router-dom";
import {
Language,
LANGUAGES,
LANGUAGE_RENDER_MAP,
TEMP_SUPPORTED_LANGUAGES,
} from "../../constants/languages";
import { getPackagePath } from "../../util/url";
import { LanguageSupportTooltip } from "../LanguageSupportTooltip";
const sizes = {
sm: 5,
md: 6,
lg: 8,
};
export interface PackageLanguagesProps {
isRounded?: boolean;
languages?: Partial<Record<Language, unknown>>;
name: string;
size?: "sm" | "md" | "lg";
version: string;
}
export const PackageLanguages: FunctionComponent<PackageLanguagesProps> = ({
isRounded = false,
languages,
name: packageName,
size = "md",
version,
}) => {
const targets = Object.keys(languages ?? {}) as Language[];
return (
<>
{Object.entries(LANGUAGE_RENDER_MAP)
// Ensure entries are always sorted in a stable way
.sort(
([left], [right]) =>
LANGUAGES.indexOf(left as Language) -
LANGUAGES.indexOf(right as Language)
)
.map(([lang, info]) => {
const language = lang as Language;
const isSupportedByLibrary =
language === Language.TypeScript || targets.includes(language);
const isSupportedByConstructHub =
language === Language.TypeScript || // TypeScript is always supported
// Otherwise, the language must be supported by ConstructHub
TEMP_SUPPORTED_LANGUAGES.has(language);
if (!isSupportedByLibrary) return null;
const { name, icon: Icon } = info;
const icon = (
<Icon
aria-label={`Supports ${name}`}
borderRadius={isRounded ? "50%" : 0}
h={sizes[size]}
opacity={isSupportedByConstructHub ? 1 : 0.2}
w={sizes[size]}
/>
);
return (
<LanguageSupportTooltip key={language} language={language}>
{isSupportedByConstructHub ? (
<Link
aria-label={`View package docs for ${language}`}
to={getPackagePath({ name: packageName, version, language })}
>
{icon}
</Link>
) : (
icon
)}
</LanguageSupportTooltip>
);
})}
</>
);
};
|