import type { FunctionComponent, PropsWithChildren } from "react"; import { type LinksFunction, type LoaderFunction, json } from "@remix-run/node"; import { Link, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch, useLoaderData, } from "@remix-run/react"; import config from "~/config/config.server"; import usePanelbear from "~/features/core/hooks/use-panelbear"; import Logo from "~/features/core/components/logo"; import styles from "./styles/tailwind.css"; export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }]; type LoaderData = { shellphoneConfig: { sentry: { dsn: string; }; panelbear: { siteId: string; }; }; }; export const loader: LoaderFunction = () => { return json({ shellphoneConfig: { sentry: { dsn: config.sentry.dsn, }, panelbear: { siteId: config.panelBear.siteId, }, }, }); }; export default function App() { const { shellphoneConfig } = useLoaderData(); usePanelbear(shellphoneConfig.panelbear.siteId); return (