Function VariableSimple

website/app/components/preview/InstallCode.tsx:63–123

({ metadata, variable }: InstallCodeProps)

);

const VariableSimple = ({ metadata, variable }: InstallCodeProps) => {
	const [isActive, setActive] = useState<Record<string, boolean>>({
		wght: true,
	});

	if (!variable) return null;

	const isItal = isActive.ital;

	const importComment =
		metadata.weights.length === 1
			? `// Supports only weight ${metadata.weights[0]}\n`
			: `// Supports weights ${metadata.weights[0]}-${
					metadata.weights.at(-1) ?? 400
				}\n`;

	const generateImports = () => {
		const activeAxisTags = Object.keys(isActive).filter(
			(axis) => isActive[axis],
		);
		const importSpecifier = getVariableImport(
			metadata,
			variable,
			activeAxisTags,
			isItal ? 'italic' : 'normal',
		);
		return `import '${importSpecifier}';`;
	};

	const handleActive = (value: string | number) => {
		setActive((prev) => toggleVariableAxis(prev, value));
	};

	return (
		<>
			{variable && (
				<BadgeGroup
					items={Object.keys(variable.axes)}
					onClick={handleActive}
					isActive={(value) => isActive[value]}
					mt="xs"
				/>
			)}
			<Code language="jsx">{importComment + generateImports()}</Code>
			<Title order={3} mt="xl" mb="md">
				CSS
			</Title>
			<Text>
				Include the CSS in your project by adding the following line to your
				project:
			</Text>
			<Code language="css">
				{`body {
  font-family: '${metadata.family} Variable', ${
		categoryMap[metadata.category] ?? 'sans-serif'
	};
}`}
			</Code>