Providing my root.tsx below
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
useRouteLoaderData,
} from "@remix-run/react";
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
import { useChangeLanguage } from "remix-i18next/react";
import "./tailwind.css";
import i18next from "./services/i18n.server";
import { useTranslation } from "react-i18next";
export async function loader({ request }: LoaderFunctionArgs) {
let locale = await i18next.getLocale(request);
return locale;
}
export let handle = {
i18n: "common",
};
export const links: LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
];
export function Layout({ children }: { children: React.ReactNode }) {
let locale = useRouteLoaderData<typeof loader>("root");
let { i18n } = useTranslation();
useChangeLanguage(locale!);
return (
<html lang={locale} dir={i18n.dir()}>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<div className="flex flex-col container min-h-screen px-4 md:p-0 mx-auto">
<div className="flex-1 pt-36">{children}</div>
</div>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}