Function App

docs/app/root.tsx:40–65

({ loaderData }: Route.ComponentProps)

}

export default function App({ loaderData }: Route.ComponentProps) {
	const { lang, clientEnv } = loaderData
	useChangeLanguage(lang)
	const fontFaceRules = fonts
		.map(
			(font) => `
                @font-face {
                    font-family: "${font.fontFamily}";
                    font-style: ${font.fontStyle};
                    font-weight: ${font.fontWeight};
                    src: url(${font.src}) format("truetype");
                    font-display: swap;
                }
            `
		)
		.join("\n")
	return (
		<>
			<Outlet />
			{/* biome-ignore lint/security/noDangerouslySetInnerHtml: We set the window.env variable to the client env */}
			<script dangerouslySetInnerHTML={{ __html: `window.env = ${JSON.stringify(clientEnv)}` }} />
			{/* biome-ignore lint/security/noDangerouslySetInnerHtml: fonts loading*/}
			<style dangerouslySetInnerHTML={{ __html: fontFaceRules }} />
		</>
	)
}

export const Layout = ({ children }: { children: React.ReactNode }) => {
	const { i18n } = useTranslation()