typography-example.js

/**
 * WordPress dependencies
 */
import { useContext } from '@wordpress/element';
import { __unstableMotion as motion } from '@wordpress/components';
import { _x } from '@wordpress/i18n';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import { mergeBaseAndUserConfigs } from './global-styles-provider';
import { unlock } from '../../lock-unlock';
import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
import { getFontFamilies } from './utils';

const { GlobalStylesContext } = unlock( blockEditorPrivateApis );

export default function PreviewTypography( { fontSize, variation } ) {
	const { base } = useContext( GlobalStylesContext );
	let config = base;
	if ( variation ) {
		config = mergeBaseAndUserConfigs( base, variation );
	}
	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
	const bodyPreviewStyle = bodyFontFamilies
		? getFamilyPreviewStyle( bodyFontFamilies )
		: {};
	const headingPreviewStyle = headingFontFamilies
		? getFamilyPreviewStyle( headingFontFamilies )
		: {};

	if ( fontSize ) {
		bodyPreviewStyle.fontSize = fontSize;
		headingPreviewStyle.fontSize = fontSize;
	}

	return (
		<motion.div
			animate={ {
				scale: 1,
				opacity: 1,
			} }
			initial={ {
				scale: 0.1,
				opacity: 0,
			} }
			transition={ {
				delay: 0.3,
				type: 'tween',
			} }
			style={ {
				textAlign: 'center',
			} }
		>
			<span style={ headingPreviewStyle }>
				{ _x( 'A', 'Uppercase letter A' ) }
			</span>
			<span style={ bodyPreviewStyle }>
				{ _x( 'a', 'Lowercase letter A' ) }
			</span>
		</motion.div>
	);
}