Function TextArea

website/app/components/preview/TextArea.tsx:114–178

({
	state$,
	metadata,
	staticCSS,
	variableCSS,
}: TextAreaProps)

});

const TextArea = ({
	state$,
	metadata,
	staticCSS,
	variableCSS,
}: TextAreaProps) => {
	const { id, family, weights, variable, defSubset, category } = metadata;
	const isVariable = Boolean(variable);

	const isItal = state$.preview.italic.get();
	const style = isItal ? 'italic' : 'normal';

	const isNotLatin =
		defSubset !== 'latin' || category === 'icons' || category === 'other';
	// biome-ignore lint/correctness/useExhaustiveDependencies: Selective.
	useEffect(() => {
		if (isNotLatin) {
			state$.preview.text.set(getPreviewText(defSubset, id));
		}
	}, [isNotLatin, defSubset, id]);

	return (
		<Flex direction="column">
			<Text className={classes.header}>Font Preview</Text>
			{isVariable && variableCSS && (
				<>
					<style
						// biome-ignore lint/security/noDangerouslySetInnerHtml: Safe to use
						dangerouslySetInnerHTML={{
							__html: variableCSS,
						}}
					/>
					{weights.map((weight) => (
						<TextBox
							key={`v-${weight}-${style}`}
							state$={state$}
							family={`${family} Variable`}
							weight={weight}
							style={style}
						/>
					))}
				</>
			)}
			{!isVariable && (
				<>
					<style
						// biome-ignore lint/security/noDangerouslySetInnerHtml: Safe to use
						dangerouslySetInnerHTML={{
							__html: staticCSS,
						}}
					/>
					{weights.map((weight) => (
						<TextBox
							key={`s-${weight}-${style}`}
							state$={state$}
							family={family}
							weight={weight}
							style={style}