diff --git a/gui/package.json b/gui/package.json index 99809d9..8671ce4 100644 --- a/gui/package.json +++ b/gui/package.json @@ -12,7 +12,8 @@ "dependencies": { "@tauri-apps/api": "^1.2.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.8.2" }, "devDependencies": { "@tauri-apps/cli": "^1.2.3", diff --git a/gui/pnpm-lock.yaml b/gui/pnpm-lock.yaml index df3c977..b2ad054 100644 --- a/gui/pnpm-lock.yaml +++ b/gui/pnpm-lock.yaml @@ -11,6 +11,7 @@ specifiers: postcss: ^8.4.21 react: ^18.2.0 react-dom: ^18.2.0 + react-router-dom: ^6.8.2 tailwindcss: ^3.2.7 typescript: ^4.9.5 vite: ^4.1.4 @@ -19,6 +20,7 @@ dependencies: '@tauri-apps/api': 1.2.0 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 + react-router-dom: 6.8.2_biqbaboplfbrettd7655fr4n2y devDependencies: '@tauri-apps/cli': 1.2.3 @@ -519,6 +521,11 @@ packages: fastq: 1.15.0 dev: true + /@remix-run/router/1.3.3: + resolution: {integrity: sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w==} + engines: {node: '>=14'} + dev: false + /@tauri-apps/api/1.2.0: resolution: {integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw==} engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'} @@ -1183,6 +1190,29 @@ packages: engines: {node: '>=0.10.0'} dev: true + /react-router-dom/6.8.2_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + '@remix-run/router': 1.3.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-router: 6.8.2_react@18.2.0 + dev: false + + /react-router/6.8.2_react@18.2.0: + resolution: {integrity: sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + dependencies: + '@remix-run/router': 1.3.3 + react: 18.2.0 + dev: false + /react/18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} diff --git a/gui/public/tauri.svg b/gui/public/tauri.svg deleted file mode 100644 index 31b62c9..0000000 --- a/gui/public/tauri.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/gui/public/vite.svg b/gui/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/gui/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gui/src/App.css b/gui/src/App.css deleted file mode 100644 index a89ebd1..0000000 --- a/gui/src/App.css +++ /dev/null @@ -1,7 +0,0 @@ -.logo.vite:hover { - filter: drop-shadow(0 0 2em #747bff); -} - -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafb); -} diff --git a/gui/src/App.tsx b/gui/src/App.tsx index 9ebfdd0..0c49c26 100644 --- a/gui/src/App.tsx +++ b/gui/src/App.tsx @@ -1,17 +1,9 @@ import { useState } from "react"; import reactLogo from "./assets/react.svg"; import { invoke } from "@tauri-apps/api/tauri"; -import "./App.css"; +import { Routes, Route, Outlet, Link } from "react-router-dom"; function App() { - const [greetMsg, setGreetMsg] = useState(""); - const [name, setName] = useState(""); - - async function greet() { - // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command - setGreetMsg(await invoke("greet", { name })); - } - return (

Welcome to Tauri!

@@ -28,24 +20,8 @@ function App() {
-

Click on the Tauri, Vite, and React logos to learn more.

-
-
{ - e.preventDefault(); - greet(); - }} - > - setName(e.currentTarget.value)} - placeholder="Enter a name..." - /> - -
-

{greetMsg}

); } diff --git a/gui/src/assets/react.svg b/gui/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/gui/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gui/src/main.css b/gui/src/main.css index b5c61c9..ff783bb 100644 --- a/gui/src/main.css +++ b/gui/src/main.css @@ -1,3 +1,26 @@ @tailwind base; @tailwind components; @tailwind utilities; + +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color: #0f0f0f; + background-color: #f6f6f6; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +@media (prefers-color-scheme: dark) { + :root { + color: #f6f6f6; + background-color: #2f2f2f; + } +} diff --git a/gui/src/main.tsx b/gui/src/main.tsx index 9ad6d41..ca1c41e 100644 --- a/gui/src/main.tsx +++ b/gui/src/main.tsx @@ -1,11 +1,13 @@ import React from "react"; import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; import App from "./App"; import "./main.css"; -import "./styles.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + + + ); diff --git a/gui/src/styles.css b/gui/src/styles.css deleted file mode 100644 index f7de85b..0000000 --- a/gui/src/styles.css +++ /dev/null @@ -1,109 +0,0 @@ -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color: #0f0f0f; - background-color: #f6f6f6; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -.container { - margin: 0; - padding-top: 10vh; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); -} - -.row { - display: flex; - justify-content: center; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -h1 { - text-align: center; -} - -input, -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; - transition: border-color 0.25s; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -button { - cursor: pointer; -} - -button:hover { - border-color: #396cd8; -} -button:active { - border-color: #396cd8; - background-color: #e8e8e8; -} - -input, -button { - outline: none; -} - -#greet-input { - margin-right: 5px; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } - button:active { - background-color: #0f0f0f69; - } -}