Function Static

website/app/components/preview/CDN.tsx:162–291

({ metadata }: CDNProps)

};

const Static = ({ metadata }: CDNProps) => {
	// Active weights
	const [isActiveWeight, setActiveWeight] = useState<Record<string, boolean>>({
		400: true,
	});
	const handleActiveWeight = (value: string | number) => {
		setActiveWeight((prev) => toggleKeyKeepOne(prev, value));
	};

	// Active italics
	const [isItal, setIsItal] = useState(false);

	// Displays
	const [displayCurrent, setDisplay] = useState('swap');
	const handleDisplay = (value: string) => {
		setDisplay(value);
	};

	// Active subsets
	const [subsets, setSubsets] = useState<string[]>([metadata.defSubset]);
	const handleActiveSubset = (value: string) => {
		if (subsets.length === 1 && subsets.includes(value)) return;

		setSubsets((prev) => {
			if (prev.includes(value)) {
				return prev.filter((subset) => subset !== value);
			}

			return [...prev, value];
		});
	};

	// Choose formats
	const FORMATS = ['woff2', 'woff', 'ttf'] as const;
	const [formats, setFormat] = useState<(typeof FORMATS)[number][]>([
		'woff2',
		'woff',
	]);
	const handleFormat = (value: string) => {
		if (!FORMATS.includes(value as (typeof FORMATS)[number])) return;
		const selectedFormat = value as (typeof FORMATS)[number];

		if (formats.length === 1 && formats.includes(selectedFormat)) return;

		setFormat((prev) => {
			if (prev.includes(selectedFormat)) {
				return prev.filter((item) => item !== selectedFormat);
			}

			return [...prev, selectedFormat];
		});
	};

	const css = buildStaticPreviewCSS(metadata, {
		subsets,
		weights: Object.keys(isActiveWeight).map((weight) => Number(weight)),
		style: isItal ? 'italic' : 'normal',
		formats,