feat: base form

src/client/components/DashboardLayout.tsx

@@ -20,10 +20,7 @@ interface Page {
 	to: ValidRoutes;
 }
 
-const pages: Page[] = [
-	{ title: "Announcements", to: "/" },
-	{ title: "Subroute", to: "/subroute" },
-];
+const pages: Page[] = [{ title: "Announcements", to: "/" }];
 
 export default function DashboardLayout({
 	children,

src/client/main.tsx

@@ -3,12 +3,13 @@ import "@fontsource/raleway/400.css";
 import "@fontsource/raleway/500.css";
 import "@fontsource/raleway/700.css";
 
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { queryClient } from "./query-client";
-// Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
 // Create a new router instance
@@ -23,8 +24,10 @@ declare module "@tanstack/react-router" {
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
-		<QueryClientProvider client={queryClient}>
-			<RouterProvider router={router} />
-		</QueryClientProvider>
+		<LocalizationProvider dateAdapter={AdapterDateFns}>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</LocalizationProvider>
 	</React.StrictMode>,
 );

src/client/routeTree.gen.ts

@@ -10,43 +10,43 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
-import { Route as SubrouteIndexRouteImport } from './routes/subroute/index'
+import { Route as AddIndexRouteImport } from './routes/add/index'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SubrouteIndexRoute = SubrouteIndexRouteImport.update({
-  id: '/subroute/',
-  path: '/subroute/',
+const AddIndexRoute = AddIndexRouteImport.update({
+  id: '/add/',
+  path: '/add/',
   getParentRoute: () => rootRouteImport,
 } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/subroute/': typeof SubrouteIndexRoute
+  '/add/': typeof AddIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/subroute': typeof SubrouteIndexRoute
+  '/add': typeof AddIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/subroute/': typeof SubrouteIndexRoute
+  '/add/': typeof AddIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/subroute/'
+  fullPaths: '/' | '/add/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/subroute'
-  id: '__root__' | '/' | '/subroute/'
+  to: '/' | '/add'
+  id: '__root__' | '/' | '/add/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  SubrouteIndexRoute: typeof SubrouteIndexRoute
+  AddIndexRoute: typeof AddIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -58,11 +58,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/subroute/': {
-      id: '/subroute/'
-      path: '/subroute'
-      fullPath: '/subroute/'
-      preLoaderRoute: typeof SubrouteIndexRouteImport
+    '/add/': {
+      id: '/add/'
+      path: '/add'
+      fullPath: '/add/'
+      preLoaderRoute: typeof AddIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
   }
@@ -70,7 +70,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  SubrouteIndexRoute: SubrouteIndexRoute,
+  AddIndexRoute: AddIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/client/routes/add/index.tsx

@@ -0,0 +1,27 @@
+import { Box, FormLabel, TextareaAutosize, TextField } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/add/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<Box
+			component="form"
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				"& > :not(style)": { m: 1, width: "25ch" },
+			}}
+			noValidate
+			autoComplete="off"
+		>
+			<TextField label="Title"></TextField>
+			<FormLabel>Text:</FormLabel>
+			<TextareaAutosize minRows={6}></TextareaAutosize>
+			<DatePicker />
+		</Box>
+	);
+}

src/client/routes/index.tsx

@@ -58,7 +58,7 @@ function RouteComponent() {
 				sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
 			>
 				<Typography variant="h4">Announcements</Typography>
-				<RouterButton to="/" variant="contained">
+				<RouterButton to="/add" variant="contained">
 					Add announcement
 				</RouterButton>
 			</Box>

src/client/routes/subroute/index.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/subroute/")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/subroute/"!</div>;
-}