| import { Outlet, Link, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router"; |
| import { Toaster } from "@/components/ui/sonner"; |
| import appCss from "../styles.css?url"; |
|
|
| function NotFoundComponent() { |
| return ( |
| <div className="flex min-h-screen items-center justify-center bg-background px-4"> |
| <div className="max-w-md text-center"> |
| <h1 className="text-7xl font-bold text-primary">404</h1> |
| <h2 className="mt-4 text-xl font-semibold">Signal lost</h2> |
| <p className="mt-2 text-sm text-muted-foreground"> |
| The page you're looking for doesn't exist. |
| </p> |
| <Link |
| to="/" |
| className="mt-6 inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground" |
| > |
| Return to base |
| </Link> |
| </div> |
| </div> |
| ); |
| } |
|
|
| export const Route = createRootRoute({ |
| head: () => ({ |
| meta: [ |
| { charSet: "utf-8" }, |
| { name: "viewport", content: "width=device-width, initial-scale=1" }, |
| { title: "DriveCore — AV Safety Incident Analysis" }, |
| { name: "description", content: "AI-powered analysis of autonomous vehicle incidents, near misses, and safety logs." }, |
| ], |
| links: [{ rel: "stylesheet", href: appCss }, { rel: "preconnect", href: "https://fonts.googleapis.com" }, { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" }], |
| }), |
| shellComponent: RootShell, |
| component: RootComponent, |
| notFoundComponent: NotFoundComponent, |
| }); |
|
|
| function RootShell({ children }: { children: React.ReactNode }) { |
| return ( |
| <html lang="en" className="dark"> |
| <head><HeadContent /></head> |
| <body> |
| {children} |
| <Scripts /> |
| </body> |
| </html> |
| ); |
| } |
|
|
| function RootComponent() { |
| return ( |
| <> |
| <Outlet /> |
| <Toaster theme="dark" richColors position="top-right" /> |
| </> |
| ); |
| } |
|
|
