Function InstallCode

website/app/components/preview/InstallCode.tsx:443–503

({ metadata, variable }: InstallCodeProps)

};

export const InstallCode = ({ metadata, variable }: InstallCodeProps) => {
	const isMaterialIcons = metadata.id.includes('material-icons');
	const isMaterialSymbols = metadata.id.includes('material-symbols');
	return (
		<Tabs defaultValue="simple" className={classes.wrapper}>
			<Tabs.List>
				<Tabs.Tab value="simple">Simple</Tabs.Tab>
				<Tabs.Tab value="advanced">Advanced</Tabs.Tab>
			</Tabs.List>
			<Tabs.Panel value="simple" pt="md">
				<Title order={3} mt="xs" mb="md">
					Import
				</Title>
				<Text mb="md">
					Include the following line in the root layout of your project to
					import the font:
				</Text>
				{variable ? (
					<VariableSimple metadata={metadata} variable={variable} />
				) : (
					<StaticSimple metadata={metadata} />
				)}
				{isMaterialIcons && (
					// @ts-expect-error - BoxProps technically does take in children props
					<Blockquote>
						<b>Note:</b>Using Material Icons on your website with Fontsource
						requires additional steps. Please refer to the{' '}
						<Link to="/docs/getting-started/material-icons" prefetch="intent">
							Material Icons documentation
						</Link>{' '}
						for more information.
					</Blockquote>
				)}
				{isMaterialSymbols && (
					// @ts-expect-error - BoxProps technically does take in children props
					<Blockquote>
						<b>Note:</b>Using Material Symbols on your website with Fontsource
						requires additional steps. Please refer to the{' '}
						<Link to="/docs/getting-started/material-symbols" prefetch="intent">
							Material Symbols documentation
						</Link>{' '}
						for more information.
					</Blockquote>
				)}
			</Tabs.Panel>
			<Tabs.Panel value="advanced" pt="xs">
				{/* @ts-expect-error - BoxProps technically does take in children props	*/}
				<Blockquote>
					<b>Note:</b> Advanced usage is recommended for users who explicitly
					need to control their <code>@font-face</code> declarations and is only
					compatible with <b>Vite</b>-based frameworks or similar.
				</Blockquote>
				{variable ? (
					<VariableAdvanced metadata={metadata} variable={variable} />
				) : (
					<StaticAdvanced metadata={metadata} />
				)}
			</Tabs.Panel>