init

2025-09-22 18:24:52 +05:30
commit 26ea6d17b1
25 changed files with 5255 additions and 0 deletions
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from 'react-router';
+import { CacheProvider } from '@emotion/react';
+import Box from '@mui/material/Box';
+import AppTheme from './theme';
+import createEmotionCache from './createCache';
+
+import type { Route } from './+types/root';
+
+export const links: Route.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=Roboto:wght@300;400;500;700&display=swap',
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+const cache = createEmotionCache();
+
+export default function App() {
+  if (typeof window !== 'undefined') {
+    return (
+      <CacheProvider value={cache}>
+        <AppTheme>
+          <Outlet />
+        </AppTheme>
+      </CacheProvider>
+    );
+  }
+  return (
+    <AppTheme>
+      <Outlet />
+    </AppTheme>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = 'Oops!';
+  let details = 'An unexpected error occurred.';
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error';
+    details =
+      error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <Box component="main" sx={{ pt: 8, p: 2, maxWidth: 'lg', mx: 'auto' }}>
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <Box component="pre" sx={{ width: '100%', p: 2, overflowX: 'auto' }}>
+          <code>{stack}</code>
+        </Box>
+      )}
+    </Box>
+  );
+}