add monaco editor placeholder

frontend/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@fontsource/inter": "^5.0.19",
     "@it-incubator/prettier-config": "^0.1.2",
+    "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",

frontend/src/routeTree.gen.ts

@@ -12,6 +12,7 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
+import { Route as RawIndexImport } from './routes/raw/index'
 import { Route as DbDbNameTablesIndexImport } from './routes/db/$dbName/tables/index'
 import { Route as DbDbNameTablesTableNameIndexImport } from './routes/db/$dbName/tables/$tableName/index'
 import { Route as DbDbNameTablesTableNameDataImport } from './routes/db/$dbName/tables/$tableName/data'
@@ -23,6 +24,11 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const RawIndexRoute = RawIndexImport.update({
+  path: '/raw/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const DbDbNameTablesIndexRoute = DbDbNameTablesIndexImport.update({
   path: '/db/$dbName/tables/',
   getParentRoute: () => rootRoute,
@@ -51,6 +57,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/raw/': {
+      id: '/raw/'
+      path: '/raw'
+      fullPath: '/raw'
+      preLoaderRoute: typeof RawIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/db/$dbName/tables/': {
       id: '/db/$dbName/tables/'
       path: '/db/$dbName/tables'
@@ -79,6 +92,7 @@ declare module '@tanstack/react-router' {
 
 export const routeTree = rootRoute.addChildren({
   IndexRoute,
+  RawIndexRoute,
   DbDbNameTablesIndexRoute,
   DbDbNameTablesTableNameDataRoute,
   DbDbNameTablesTableNameIndexRoute,
@@ -93,6 +107,7 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
+        "/raw/",
         "/db/$dbName/tables/",
         "/db/$dbName/tables/$tableName/data",
         "/db/$dbName/tables/$tableName/"
@@ -101,6 +116,9 @@ export const routeTree = rootRoute.addChildren({
     "/": {
       "filePath": "index.tsx"
     },
+    "/raw/": {
+      "filePath": "raw/index.tsx"
+    },
     "/db/$dbName/tables/": {
       "filePath": "db/$dbName/tables/index.tsx"
     },

frontend/src/routes/__root.tsx

@@ -61,6 +61,9 @@ function Root() {
             <Link to="/" className="[&.active]:font-bold">
               Home
             </Link>
+            <Link to="/raw" className="[&.active]:font-bold">
+              Raw
+            </Link>
           </div>
           <div className={"flex items-center gap-2"}>
             <ModeToggle />

frontend/src/routes/raw/index.tsx

@@ -0,0 +1,16 @@
+import Editor from "@monaco-editor/react";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/raw/")({
+  component: Component,
+});
+
+function Component() {
+  return (
+    <Editor
+      height="90vh"
+      defaultLanguage="sql"
+      defaultValue="SELECT * FROM table"
+    />
+  );
+}