├── vite.config.ts.timestamp-1719693692326-f548269587e3a.mjs
├── .gitignore
├── env.d.ts
├── public
    └── favicon.ico
├── postcss.config.js
├── app
    ├── styles
    │   └── tailwind.css
    ├── routes
    │   ├── db.tsx
    │   ├── db.$name.tsx
    │   ├── db.$name._index.tsx
    │   ├── db.$name.docs.tsx
    │   ├── db._index.tsx
    │   ├── db.$name.history.tsx
    │   ├── _index.tsx
    │   ├── db.$name.create.tsx
    │   └── db.$name.doc.$id.tsx
    ├── entry.client.tsx
    ├── root.tsx
    └── components
    │   ├── FireproofMenu.tsx
    │   └── Sidebar.tsx
├── tailwind.config.js
├── vite.config.ts
├── tsconfig.json
├── package.json
├── README.md
└── .eslintrc.cjs


/vite.config.ts.timestamp-1719693692326-f548269587e3a.mjs:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | /.cache
4 | /build
5 | /public/build
6 | .env
7 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/node" />
2 | /// <reference types="vite/client" />
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jchris/dashboard-remix/main/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };


--------------------------------------------------------------------------------
/app/styles/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   a:hover {
 7 |     @apply underline;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   plugins: [],
10 | };


--------------------------------------------------------------------------------
/app/routes/db.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | import { FireproofMenu } from "~/components/FireproofMenu";
 3 | 
 4 | export default function DbIndex() {
 5 |   return (
 6 |     <div>
 7 |       <FireproofMenu />
 8 |       <Outlet />
 9 |     </div>
10 |   );
11 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { vitePlugin as remix } from "@remix-run/dev";
 2 | import { defineConfig } from "vite";
 3 | import tsconfigPaths from "vite-tsconfig-paths";
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     remix({
 8 |       ssr: false,
 9 |       future: {
10 |         v3_fetcherPersist: true,
11 |         v3_relativeSplatPath: true,
12 |         v3_throwAbortReason: true,
13 |       },
14 |     }),
15 |     tsconfigPaths(),
16 |   ],
17 | });
18 | 


--------------------------------------------------------------------------------
/app/routes/db.$name.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | import { Sidebar } from "~/components/Sidebar";
 3 | 
 4 | export default function Database() {
 5 |   return (
 6 |     <div className="flex">
 7 |       <div className="w-56"> {/* Fixed width of 16rem (64 units) */}
 8 |         <Sidebar />
 9 |       </div>
10 |       <div className="flex-1 p-4"> {/* Flex-grow to take remaining space */}
11 |         <Outlet />
12 |       </div>
13 |     </div>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * By default, Remix will handle hydrating your app on the client for you.
 3 |  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 4 |  * For more information, see https://remix.run/file-conventions/entry.client
 5 |  */
 6 | 
 7 | import { RemixBrowser } from "@remix-run/react";
 8 | import { startTransition, StrictMode } from "react";
 9 | import { hydrateRoot } from "react-dom/client";
10 | 
11 | startTransition(() => {
12 |   hydrateRoot(
13 |     document,
14 |     <StrictMode>
15 |       <RemixBrowser />
16 |     </StrictMode>
17 |   );
18 | });
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
 3 |   "compilerOptions": {
 4 |     "lib": ["DOM", "DOM.Iterable", "ES2022"],
 5 |     "isolatedModules": true,
 6 |     "esModuleInterop": true,
 7 |     "jsx": "react-jsx",
 8 |     "module": "ESNext",
 9 |     "moduleResolution": "Bundler",
10 |     "resolveJsonModule": true,
11 |     "target": "ES2022",
12 |     "strict": true,
13 |     "allowJs": true,
14 |     "skipLibCheck": true,
15 |     "forceConsistentCasingInFileNames": true,
16 |     "baseUrl": ".",
17 |     "paths": {
18 |       "~/*": ["./app/*"]
19 |     },
20 | 
21 |     // Remix takes care of building everything in `remix build`.
22 |     "noEmit": true
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/app/routes/db.$name._index.tsx:
--------------------------------------------------------------------------------
 1 | import { useParams } from "@remix-run/react";
 2 | import { useFireproof } from "use-fireproof";
 3 | 
 4 | 
 5 | export default function DbInfo() {
 6 |   const { name } = useParams();
 7 |   const { useLiveQuery, database } = useFireproof(name);
 8 |   const allDocs = useLiveQuery('_id')
 9 |   const head = database._crdt.clock.head.map(cid => cid.toString())
10 | 
11 |   return (
12 |     <div className="p-4">
13 |       <h2 className="text-xl font-bold mb-2">
14 |         Info: <code className="bg-gray-200 p-1 rounded">{name}</code>
15 |       </h2>
16 |       <p className="mb-4">There are {allDocs.docs.length} documents</p>
17 |       <h3 className="text-lg font-semibold mb-2">Head:</h3>
18 |       <pre className="bg-gray-100 p-2 rounded">
19 |         <code className="text-sm">{JSON.stringify(head, null, 2)}</code>
20 |       </pre>
21 |     </div>
22 |   );
23 | }


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
 1 | import "./styles/tailwind.css";
 2 | import {
 3 |   Links,
 4 |   Meta,
 5 |   Outlet,
 6 |   Scripts,
 7 |   ScrollRestoration
 8 | } from "@remix-run/react";
 9 | 
10 | export function Layout({ children }: { children: React.ReactNode }) {
11 |   return (
12 |     <html lang="en" className="dark:bg-gray-900 dark:text-white">
13 |       <head>
14 |         <meta charSet="utf-8" />
15 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
16 |         <Meta />
17 |         <Links />
18 |       </head>
19 |       <body className="bg-white text-black dark:bg-gray-900 dark:text-white">
20 |         {children}
21 |         <ScrollRestoration />
22 |         <Scripts />
23 |       </body>
24 |     </html>
25 |   );
26 | }
27 | 
28 | export default function App() {
29 |   return <Outlet />
30 | }
31 | 
32 | export function HydrateFallback() {
33 |   return <p>Loading...</p>;
34 | }


--------------------------------------------------------------------------------
/app/routes/db.$name.docs.tsx:
--------------------------------------------------------------------------------
 1 | import { useParams } from "@remix-run/react";
 2 | import { Link } from "react-router-dom";
 3 | import { useFireproof } from "use-fireproof";
 4 | 
 5 | 
 6 | export default function AddDocuments() {
 7 |   const { name } = useParams();
 8 |   const { useLiveQuery } = useFireproof(name);
 9 |   const allDocs = useLiveQuery('_id')
10 | 
11 |   return (
12 |     <div className="p-4">
13 |       <h2 className="text-xl font-bold mb-2">All Documents</h2>
14 |       <p className="mb-4">
15 |         These are all the documents in the <code className="bg-gray-200 p-1 rounded">{name}</code> database.
16 |       </p>
17 |       <ul>
18 |         {allDocs.docs.map(({ _id }) => (
19 |           <li key={_id} className="mb-2">
20 |             <Link to={`/db/${name}/doc/${_id}`} className="text-blue-500 underline">
21 |               {_id}
22 |             </Link>
23 |           </li>
24 |         ))}
25 |       </ul>
26 |     </div>
27 |   );
28 | }


--------------------------------------------------------------------------------
/app/components/FireproofMenu.tsx:
--------------------------------------------------------------------------------
 1 | export function FireproofMenu() {
 2 |   return (
 3 |     <header className=" dark:bg-gray-800 bg-gray-300 pt-3 pb-1 px-5 flex items-center justify-between">
 4 |       <a href="https://fireproof.storage/">
 5 |         <img
 6 |           src="https://fireproof.storage/static/img/logo-animated.svg"
 7 |           alt="Fireproof Logo"
 8 |           className="h-16 w-auto pr-2"
 9 |         />
10 |       </a>
11 |       <nav className="nav-menu  dark:text-white text-black">
12 |         <ul className="flex">
13 |           <li className="mr-6">
14 |             <a href="https://fireproof.storage/developer/">Docs</a>
15 |           </li>
16 |           <li className="mr-6">
17 |             <a href="https://fireproof.storage/blog/">Blog</a>
18 |           </li>
19 |           <li className="mr-6">
20 |             <a href="https://fireproof.storage/thanks/">Community</a>
21 |           </li>
22 |         </ul>
23 |       </nav>
24 |     </header>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/app/routes/db._index.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | const databases = ["db1", "db2", "db3"]; // Replace with your actual database list
 4 | 
 5 | import { Sidebar } from "~/components/Sidebar";
 6 | 
 7 | export default function DatabaseIndex() {
 8 |   return (
 9 |     <div className="flex">
10 |       <div className="w-56">
11 |         <Sidebar />
12 |       </div>
13 |       <div className="flex-1 p-4">
14 |         <DatabaseList />
15 |       </div>
16 |     </div>
17 |   );
18 | }
19 | 
20 | function DatabaseList() {
21 |   return (
22 |     <div className="p-4">
23 |       <h2 className="text-xl font-bold mb-2">Available Databases</h2>
24 |       <p className="mb-4">This is the index page for the /db route.</p>
25 |       <ul>
26 |         {databases.map((db) => (
27 |           <li key={db} className="mb-2">
28 |             <Link to={`/db/${db}`} className="text-blue-500 underline">
29 |               {db}
30 |             </Link>
31 |           </li>
32 |         ))}
33 |       </ul>
34 |     </div>
35 |   );
36 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dashboard",
 3 |   "private": true,
 4 |   "sideEffects": false,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "build": "remix vite:build",
 8 |     "dev": "remix vite:dev",
 9 |     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
10 |     "preview": "vite preview",
11 |     "typecheck": "tsc"
12 |   },
13 |   "dependencies": {
14 |     "@remix-run/node": "^2.10.0",
15 |     "@remix-run/react": "^2.10.0",
16 |     "react": "^18.3.1",
17 |     "react-dom": "^18.3.1",
18 |     "use-fireproof": "^0.18.0"
19 |   },
20 |   "devDependencies": {
21 |     "@remix-run/dev": "^2.10.0",
22 |     "@types/react": "^18.3.3",
23 |     "@types/react-dom": "^18.3.0",
24 |     "@typescript-eslint/eslint-plugin": "^7.14.1",
25 |     "@typescript-eslint/parser": "^7.14.1",
26 |     "autoprefixer": "^10.4.19",
27 |     "eslint": "^8.5.0",
28 |     "eslint-import-resolver-typescript": "^3.6.1",
29 |     "eslint-plugin-import": "^2.29.1",
30 |     "eslint-plugin-jsx-a11y": "^6.9.0",
31 |     "eslint-plugin-react": "^7.34.3",
32 |     "eslint-plugin-react-hooks": "^4.6.2",
33 |     "postcss": "^8.4.39",
34 |     "tailwindcss": "^3.4.4",
35 |     "typescript": "^5.5.2",
36 |     "vite": "^5.3.2",
37 |     "vite-tsconfig-paths": "^4.3.2"
38 |   },
39 |   "engines": {
40 |     "node": ">=20.0.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/app/routes/db.$name.history.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { useParams } from "@remix-run/react";
 3 | import { Link } from "react-router-dom";
 4 | import { DocBase, useFireproof } from "use-fireproof";
 5 | 
 6 | 
 7 | export default function AddDocuments() {
 8 |   const { name } = useParams();
 9 |   const { database } = useFireproof(name);
10 | 
11 |   const [history, setHistory] = useState({ rows: [] } as { rows: { key: string; value: DocBase }[] });
12 | 
13 |   useEffect(() => {
14 |     const handleChanges = async () => {
15 |       const changes = await database.changes()
16 |       setHistory(changes);
17 |     };
18 | 
19 |     void handleChanges()
20 |     return database.subscribe(handleChanges);
21 |   }, [database]);
22 | 
23 |   return (
24 |     <div className="p-4">
25 |       <h2 className="text-xl font-bold mb-2">
26 |         Recent Changes in <code className="bg-gray-200 p-1 rounded">{name}</code> Database
27 |       </h2>
28 |       <p className="mb-4">These are the recent changes in the database.</p>
29 |       <ul>
30 |         {history.rows.map(({ key }) => (
31 |           <li key={key} className="mb-2">
32 |             <Link to={`/db/${name}/doc/${key}`} className="text-blue-500 underline">
33 |               {key}
34 |             </Link>
35 |           </li>
36 |         ))}
37 |       </ul>
38 |     </div>
39 |   );
40 | }


--------------------------------------------------------------------------------
/app/routes/_index.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | export default function Index() {
 5 |   const [dbNames, setDbNames] = useState<string[]>([]);
 6 |   const [newDbName, setNewDbName] = useState("");
 7 | 
 8 |   const handleAddDbName = (e: React.FormEvent) => {
 9 |     e.preventDefault();
10 |     if (newDbName && !dbNames.includes(newDbName)) {
11 |       setDbNames([...dbNames, newDbName]);
12 |       setNewDbName("");
13 |     }
14 |   };
15 | 
16 |   return (
17 |     <div className="p-6 font-sans">
18 |       <h2 className="text-xl font-bold mb-4">Database List</h2>
19 |       <form onSubmit={handleAddDbName} className="mb-4">
20 |         <input
21 |           type="text"
22 |           value={newDbName}
23 |           onChange={(e) => setNewDbName(e.target.value)}
24 |           placeholder="Enter database name"
25 |           className="border p-2 mr-2"
26 |         />
27 |         <button type="submit" className="bg-blue-500 text-white p-2">
28 |           Add Database
29 |         </button>
30 |       </form>
31 |       <ul>
32 |         {dbNames.map((name) => (
33 |           <li key={name} className="mb-2">
34 |             <Link to={`/db/${name}`} className="text-blue-500 underline">
35 |               {name}
36 |             </Link>
37 |           </li>
38 |         ))}
39 |       </ul>
40 |     </div>
41 |   );
42 | }


--------------------------------------------------------------------------------
/app/routes/db.$name.create.tsx:
--------------------------------------------------------------------------------
 1 | import { useParams } from "@remix-run/react";
 2 | import { useState } from "react";
 3 | import { useFireproof } from "use-fireproof";
 4 | 
 5 | export default function CreateDocument() {
 6 |   const { name } = useParams();
 7 |   const { database } = useFireproof(name);
 8 |   const [jsonInput, setJsonInput] = useState("");
 9 |   const [error, setError] = useState("");
10 | 
11 |   const handleSave = () => {
12 |     try {
13 |       const parsedJson = JSON.parse(jsonInput);
14 |       database.put(parsedJson);
15 |       setError("");
16 |       setJsonInput("");
17 |     } catch (e) {
18 |       setError("Invalid JSON");
19 |     }
20 |   };
21 | 
22 |   return (
23 |     <div className="p-4">
24 |       <h2 className="text-xl font-bold mb-2">Create Document</h2>
25 |       <p className="mb-4">
26 |         Enter the JSON for the new document in the <code className="bg-gray-200 p-1 rounded">{name}</code> database.
27 |       </p>
28 |       <textarea
29 |         value={jsonInput}
30 |         onChange={(e) => setJsonInput(e.target.value)}
31 |         placeholder="Enter JSON here"
32 |         className="border p-2 w-full h-40 mb-2"
33 |       />
34 |       {error && <p className="text-red-500 mb-2">{error}</p>}
35 |       <button onClick={handleSave} className="bg-blue-500 text-white p-2">
36 |         Save Document
37 |       </button>
38 |     </div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # templates/spa
 2 | 
 3 | This template leverages [Remix SPA Mode](https://remix.run/docs/en/main/guides/spa-mode) to build your app as a Single-Page Application using [Client Data](https://remix.run/docs/en/main/guides/client-data) for all of your data loads and mutations.
 4 | 
 5 | ## Setup
 6 | 
 7 | ```shellscript
 8 | npx create-remix@latest --template remix-run/remix/templates/spa
 9 | ```
10 | 
11 | ## Development
12 | 
13 | You can develop your SPA app just like you would a normal Remix app, via:
14 | 
15 | ```shellscript
16 | npm run dev
17 | ```
18 | 
19 | ## Production
20 | 
21 | When you are ready to build a production version of your app, `npm run build` will generate your assets and an `index.html` for the SPA.
22 | 
23 | ```shellscript
24 | npm run build
25 | ```
26 | 
27 | ### Preview
28 | 
29 | You can preview the build locally with [vite preview](https://vitejs.dev/guide/cli#vite-preview) to serve all routes via the single `index.html` file:
30 | 
31 | ```shellscript
32 | npm run preview
33 | ```
34 | 
35 | > [!IMPORTANT]
36 | >
37 | > `vite preview` is not designed for use as a production server
38 | 
39 | ### Deployment
40 | 
41 | You can then serve your app from any HTTP server of your choosing. The server should be configured to serve multiple paths from a single root `/index.html` file (commonly called "SPA fallback"). Other steps may be required if the server doesn't directly support this functionality.
42 | 
43 | For a simple example, you could use [sirv-cli](https://www.npmjs.com/package/sirv-cli):
44 | 
45 | ```shellscript
46 | npx sirv-cli build/client/ --single
47 | ```
48 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This is intended to be a basic starting point for linting in your app.
 3 |  * It relies on recommended configs out of the box for simplicity, but you can
 4 |  * and should modify this configuration to best suit your team's needs.
 5 |  */
 6 | 
 7 | /** @type {import('eslint').Linter.Config} */
 8 | module.exports = {
 9 |   root: true,
10 |   parserOptions: {
11 |     ecmaVersion: "latest",
12 |     sourceType: "module",
13 |     ecmaFeatures: {
14 |       jsx: true,
15 |     },
16 |   },
17 |   env: {
18 |     browser: true,
19 |     commonjs: true,
20 |     es6: true,
21 |   },
22 |   ignorePatterns: ["!**/.server", "!**/.client"],
23 | 
24 |   // Base config
25 |   extends: ["eslint:recommended"],
26 | 
27 |   overrides: [
28 |     // React
29 |     {
30 |       files: ["**/*.{js,jsx,ts,tsx}"],
31 |       plugins: ["react", "jsx-a11y"],
32 |       extends: [
33 |         "plugin:react/recommended",
34 |         "plugin:react/jsx-runtime",
35 |         "plugin:react-hooks/recommended",
36 |         "plugin:jsx-a11y/recommended",
37 |       ],
38 |       settings: {
39 |         react: {
40 |           version: "detect",
41 |         },
42 |         formComponents: ["Form"],
43 |         linkComponents: [
44 |           { name: "Link", linkAttribute: "to" },
45 |           { name: "NavLink", linkAttribute: "to" },
46 |         ],
47 |         "import/resolver": {
48 |           typescript: {},
49 |         },
50 |       },
51 |     },
52 | 
53 |     // Typescript
54 |     {
55 |       files: ["**/*.{ts,tsx}"],
56 |       plugins: ["@typescript-eslint", "import"],
57 |       parser: "@typescript-eslint/parser",
58 |       settings: {
59 |         "import/internal-regex": "^~/",
60 |         "import/resolver": {
61 |           node: {
62 |             extensions: [".ts", ".tsx"],
63 |           },
64 |           typescript: {
65 |             alwaysTryTypes: true,
66 |           },
67 |         },
68 |       },
69 |       extends: [
70 |         "plugin:@typescript-eslint/recommended",
71 |         "plugin:import/recommended",
72 |         "plugin:import/typescript",
73 |       ],
74 |     },
75 | 
76 |     // Node
77 |     {
78 |       files: [".eslintrc.cjs"],
79 |       env: {
80 |         node: true,
81 |       },
82 |     },
83 |   ],
84 | };
85 | 


--------------------------------------------------------------------------------
/app/routes/db.$name.doc.$id.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "@remix-run/react";
 2 | import { useParams } from "react-router-dom";
 3 | import { DocBase, useFireproof } from "use-fireproof";
 4 | import { useState } from "react";
 5 | 
 6 | export default function Document() {
 7 |   const { name, id } = useParams();
 8 |   const { useDocument, database } = useFireproof(name);
 9 |   const [isEditing, setIsEditing] = useState(false);
10 | 
11 |   const [doc] = useDocument(() => ({ _id: id! }));
12 | 
13 |   const handleSave = (updatedDoc: DocBase) => {
14 |     setIsEditing(false);
15 |     database.put(updatedDoc);
16 |   };
17 |   
18 |   return (
19 |     <div className="p-4">
20 |       <h2 className="text-xl font-bold mb-2">
21 |         Document: <code className="bg-gray-200 p-1 rounded">{id}</code>
22 |       </h2>
23 |       <p className="mb-4">
24 |         Database: <Link to={`/db/${name}`} className="text-blue-500 underline">{name}</Link>
25 |       </p>
26 |       {isEditing ? (
27 |         <EditableArea doc={doc} onSave={handleSave} />
28 |       ) : (
29 |         <div>
30 |           <pre className="bg-gray-100 p-2 rounded mb-2">
31 |             <code>{JSON.stringify(doc, null, 2)}</code>
32 |           </pre>
33 |           <button onClick={() => setIsEditing(true)} className="bg-blue-500 text-white p-2">
34 |             Edit Document
35 |           </button>
36 |         </div>
37 |       )}
38 |     </div>
39 |   );
40 | }
41 | 
42 | export function EditableArea({ doc, onSave }: { doc: DocBase, onSave: (updatedDoc: DocBase) => void }) {
43 |   const [jsonInput, setJsonInput] = useState(JSON.stringify(doc, null, 2));
44 |   const [error, setError] = useState("");
45 | 
46 |   const handleSaveClick = () => {
47 |     try {
48 |       const parsedJson = JSON.parse(jsonInput);
49 |       onSave(parsedJson);
50 |       setError("");
51 |     } catch (e) {
52 |       setError("Invalid JSON");
53 |     }
54 |   };
55 | 
56 |   return (
57 |     <div>
58 |       <textarea
59 |         value={jsonInput}
60 |         onChange={(e) => setJsonInput(e.target.value)}
61 |         placeholder="Enter JSON here"
62 |         className="border p-2 w-full h-40 mb-2"
63 |       />
64 |       {error && <p className="text-red-500 mb-2">{error}</p>}
65 |       <button onClick={handleSaveClick} className="bg-blue-500 text-white p-2">
66 |         Save Document
67 |       </button>
68 |     </div>
69 |   );
70 | }


--------------------------------------------------------------------------------
/app/components/Sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import { useParams, Link } from 'react-router-dom'
  2 | 
  3 | export function Sidebar() {
  4 |   const { name: dbName } = useParams()
  5 |   return (
  6 |     <div className="Sidebar p-4 dark:bg-gray-900 bg-slate-200">
  7 |       <ul className="mt-4">
  8 |         <li className="mb-2">
  9 |           <Link
 10 |             to="/db/"
 11 |             className="flex items-center p-2 text-gray-500 transition duration-75 dark:text-gray-400 hover:dark:text-white hover:text-black rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
 12 |           >
 13 |             <svg
 14 |               className="w-6 h-6 text-gray-800 dark:text-white"
 15 |               aria-hidden="true"
 16 |               xmlns="http://www.w3.org/2000/svg"
 17 |               fill="none"
 18 |               viewBox="0 0 20 20"
 19 |             >
 20 |               <path
 21 |                 stroke="currentColor"
 22 |                 strokeLinecap="round"
 23 |                 strokeLinejoin="round"
 24 |                 strokeWidth="1.1"
 25 |                 d="M6 14H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1M5 19h5m-9-9h5m4-4h8a1 1 0 0 1 1 1v12H9V7a1 1 0 0 1 1-1Zm6 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
 26 |               />
 27 |             </svg>
 28 |             <span className="flex-1 ml-3 whitespace-nowrap text-black dark:text-white">
 29 |               All Databases
 30 |             </span>
 31 |           </Link>
 32 |         </li>
 33 |         <li className="ml-4">
 34 |           {dbName && (
 35 |             <ul>
 36 |               <li className="mb-2">
 37 |                 <Link
 38 |                   to={`/db/${dbName}/docs`}
 39 |                   className="flex items-center p-2 text-gray-500 transition duration-75 dark:text-gray-400 hover:dark:text-white hover:text-black rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
 40 |                 >
 41 |                   <svg
 42 |                     className="w-6 h-6 text-gray-800 dark:text-white"
 43 |                     aria-hidden="true"
 44 |                     xmlns="http://www.w3.org/2000/svg"
 45 |                     fill="none"
 46 |                     viewBox="0 0 18 20"
 47 |                   >
 48 |                     <path
 49 |                       stroke="currentColor"
 50 |                       strokeLinecap="round"
 51 |                       strokeLinejoin="round"
 52 |                       strokeWidth="1.1"
 53 |                       d="M17 4c0 1.657-3.582 3-8 3S1 5.657 1 4m16 0c0-1.657-3.582-3-8-3S1 2.343 1 4m16 0v6M1 4v6m0 0c0 1.657 3.582 3 8 3s8-1.343 8-3M1 10v6c0 1.657 3.582 3 8 3s8-1.343 8-3v-6"
 54 |                     />
 55 |                   </svg>
 56 |                   <span className="flex-1 ml-3 whitespace-nowrap text-black dark:text-white">
 57 |                     <code>{dbName}</code>
 58 |                   </span>
 59 |                 </Link>
 60 |               </li>
 61 |               <li className="mb-2">
 62 |                 <Link
 63 |                   to={`/db/${dbName}/create`}
 64 |                   className="flex items-center p-2 text-gray-500 transition duration-75 dark:text-gray-400 hover:dark:text-white hover:text-black rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
 65 |                 >
 66 |                   <svg
 67 |                     xmlns="http://www.w3.org/2000/svg"
 68 |                     fill="none"
 69 |                     viewBox="0 0 24 24"
 70 |                     strokeWidth="1.5"
 71 |                     stroke="currentColor"
 72 |                     className="w-6 h-6"
 73 |                   >
 74 |                     <path
 75 |                       strokeLinecap="round"
 76 |                       strokeLinejoin="round"
 77 |                       d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
 78 |                     />
 79 |                   </svg>
 80 | 
 81 |                   <span className="flex-1 ml-3 whitespace-nowrap text-black dark:text-white">
 82 |                     Create Document
 83 |                   </span>
 84 |                 </Link>
 85 |               </li>
 86 |               <li className="mb-2">
 87 |                 <Link
 88 |                   to={`/db/${dbName}/history`}
 89 |                   className="flex items-center p-2 text-gray-500 transition duration-75 dark:text-gray-400 hover:dark:text-white hover:text-black rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
 90 |                 >
 91 |                   <svg
 92 |                     xmlns="http://www.w3.org/2000/svg"
 93 |                     fill="none"
 94 |                     viewBox="0 0 24 24"
 95 |                     strokeWidth={1.5}
 96 |                     stroke="currentColor"
 97 |                     className="w-6 h-6"
 98 |                   >
 99 |                     <path
100 |                       strokeLinecap="round"
101 |                       strokeLinejoin="round"
102 |                       d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
103 |                     />
104 |                   </svg>
105 |                   <span className="flex-1 ml-3 whitespace-nowrap text-black dark:text-white">
106 |                     History
107 |                   </span>
108 |                 </Link>
109 |               </li>
110 |               <li className="mb-2">
111 |                 <Link
112 |                   to={`/db/${dbName}/query`}
113 |                   className="flex items-center p-2 text-gray-500 transition duration-75 dark:text-gray-400 hover:dark:text-white hover:text-black rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
114 |                 >
115 |                   <svg
116 |                     xmlns="http://www.w3.org/2000/svg"
117 |                     fill="none"
118 |                     viewBox="0 0 24 24"
119 |                     strokeWidth="1.5"
120 |                     stroke="currentColor"
121 |                     className="w-6 h-6"
122 |                   >
123 |                     <path
124 |                       strokeLinecap="round"
125 |                       strokeLinejoin="round"
126 |                       d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
127 |                     />
128 |                   </svg>
129 |                   <span className="flex-1 ml-3 whitespace-nowrap text-black dark:text-white">
130 |                     Query
131 |                   </span>
132 |                 </Link>
133 |               </li>
134 |             </ul>
135 |           )}
136 |         </li>
137 |       </ul>
138 |     </div>
139 |   )
140 | }
141 | 


--------------------------------------------------------------------------------