Function VariableAdvanced

website/app/components/preview/InstallCode.tsx:125–229

({ metadata, variable }: InstallCodeProps)

};

const VariableAdvanced = ({ metadata, variable }: InstallCodeProps) => {
	const [isActive, setActive] = useState<ActiveVariants>({
		axes: {
			wght: true,
		},
		display: 'swap',
		subsets: [metadata.defSubset],
	});

	// Return early if no variable data
	if (!variable) return null;

	const handleActiveSubset = (value: string) => {
		// Return early if only one subset is selected and it is the current one
		if (isActive.subsets.length === 1 && isActive.subsets.includes(value))
			return;

		setActive((prev) => {
			if (prev.subsets.includes(value)) {
				return {
					...prev,
					subsets: prev.subsets.filter((subset) => subset !== value),
				};
			}

			return {
				...prev,
				subsets: [...prev.subsets, value],
			};
		});
	};

	const handleActiveDisplay = (value: string) => {
		setActive((prev) => ({
			...prev,
			display: value,
		}));
	};

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

	const isItal = isActive.axes.ital;

	const css = buildVariablePreviewCSS(metadata, variable, {
		activeAxes: Object.keys(isActive.axes).filter(
			(axis) => isActive.axes[axis],
		),
		subsets: isActive.subsets,
		style: isItal ? 'italic' : 'normal',
		display: isActive.display,
		resolver: ({ source }) =>
			`@fontsource-variable/${metadata.id}/files/${source.filename}`,
	});