import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react"; import clsx from "clsx"; import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from "remix-themes"; import { themeSessionResolver } from "./sessions.server"; import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node"; import { ProgressProvider } from "@bprogress/remix"; import "./tailwind.css"; 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" }, { rel: "stylesheet", href: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" } ]; export async function loader({ request }: LoaderFunctionArgs) { const { getTheme } = await themeSessionResolver(request); return { theme: getTheme() }; } export default function AppWithProviders() { const data = useLoaderData(); return ( ); } export function App() { const data = useLoaderData(); const [theme] = useTheme(); return ( ); }