feat: add i18n and initial screens

package.json

@@ -13,8 +13,11 @@
     "@tauri-apps/api": "^1.4.0",
     "flowbite": "^1.6.6",
     "flowbite-react": "^0.4.7",
+    "i18next": "^23.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.0.0",
+    "react-router-dom": "^6.13.0"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.4.0",

src/App.tsx

@@ -1,7 +1,10 @@
 'use client';
-// import { useState } from "react";
+import { useState, useEffect } from "react";
 // import { invoke } from "@tauri-apps/api/tauri";
-import { DarkThemeToggle, Flowbite } from 'flowbite-react';
+import { Flowbite, DarkThemeToggle, useThemeMode } from 'flowbite-react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from './pages/Home';
+import Tabs from './pages/Tabs';
 
 
 function App() {
@@ -13,15 +16,33 @@ function App() {
   //   setGreetMsg(await invoke("greet", { name }));
   // }
 
+  const [mode, setMode, toggleMode] = useThemeMode();
+  const [dark, setDark] = useState(false);
+
+  useEffect(() => {
+    let dark =
+      localStorage.getItem("theme") === "dark"
+    setDark(dark);
+  }, [])
+
   return (
-    <Flowbite>
-      <div className="bg-white dark:bg-gray-800 h-full w-full flex flex-col justify-center items-center">
-        <h1 className="text-black dark:text-white">Welcome to Query Noir!</h1>
-        <div>
-          <DarkThemeToggle />
-        </div>
+    <Flowbite theme={{ dark }}>
+      <div className="bg h-full w-full flex">
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" Component={Home} />
+            <Route path="/tabs" Component={Tabs} />
+          </Routes>
+        </BrowserRouter>
+        {/**
+        <DarkThemeToggle onClick={() => {
+          toggleMode();
+          let newMode = mode == "dark" ? "light" : "dark";
+          localStorage.setItem("theme", newMode);
+        }} />
+        */}
       </div>
-    </Flowbite>
+    </Flowbite >
   );
 }
 

src/index.css

@@ -27,3 +27,11 @@ body {
   width: 100%;
   height: 100%;
 }
+
+.text {
+  @apply text-black dark:text-white;
+}
+
+.bg {
+  @apply bg-white dark:bg-gray-800;
+}

src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
+import "./utils/i18n";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>

src/pages/Home.tsx

@@ -0,0 +1,56 @@
+// import { Link } from "react-router-dom"
+import { Navbar, Card } from 'flowbite-react';
+import { useTranslation } from "react-i18next";
+
+const Home = () => {
+  const { t } = useTranslation();
+  const connections = [
+    { name: "Local", address: "127.0.0.1:5432", default_db: "example", color: 'orange' },
+    { name: "Staging", address: "https://asd.com/", default_db: "example", color: 'red' },
+  ]
+  return (
+    <div className="flex-1">
+      <Navbar fluid>
+        <Navbar.Brand href="/">
+          <img
+            alt="Flowbite React Logo"
+            className="mr-4 rounded-full"
+            style={{ width: "60px" }}
+            src="/logo2.png"
+          />
+          <span className="self-center text whitespace-nowrap text-2xl font-semibold">
+            {t('query_noir_titlecase')}
+          </span>
+        </Navbar.Brand>
+        <Navbar.Toggle />
+        <Navbar.Collapse>
+          <Navbar.Link href="#" className="text text-xl">
+            {t('home.add_connection')}
+          </Navbar.Link>
+        </Navbar.Collapse>
+      </Navbar>
+      <div className="h-full w-full flex">
+        <div className="flex-1 p-3">
+          <div className="grid grid-cols-3 gap-4">
+            {connections.map((conn) => (
+              <Card className="gap-1 border-2">
+                <h5 className="text">{conn.name}</h5>
+                <div>
+                  <p className="text my-0">{conn.address}</p>
+                  <p className="text">{conn.default_db}</p>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+      {/*
+      <div>
+        <Link to="/tabs" className="text">Tabs</Link>
+      </div>
+      */}
+    </div>
+  )
+}
+
+export default Home

src/pages/Tabs.tsx

@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom"
+
+const Tabs = () => {
+  return (
+    <div>
+      <Link to="/">Home</Link>
+    </div>
+  )
+}
+
+export default Tabs

src/utils/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "translation": {
+    "query_noir_titlecase": "Query Noir",
+    "home": {
+      "add_connection": "Add Connection"
+    }
+  }
+}

src/utils/i18n/index.ts

@@ -0,0 +1,16 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from './en.json';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: { en },
+    lng: "en",
+    fallbackLng: "en",
+
+    interpolation: {
+      escapeValue: false
+    }
+  });
+