Added Next UI and Tailwind, further initialized

package.json

@@ -4,26 +4,34 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "tauri": "tauri"
+    "dev": "tauri dev",
+    "build": "tauri build",
+    "info": "tauri info",
+    "tauri": "tauri",
+    "vite:dev": "vite",
+    "vite:build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "engines": {
     "node": ">=20"
   },
   "packageManager": "^[email protected]",
   "dependencies": {
+    "@nextui-org/react": "^2.2.9",
+    "@tauri-apps/api": "^1.5.2",
+    "framer-motion": "^10.18.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@tauri-apps/api": "^1.5.2"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.5.8",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.0.2",
-    "vite": "^5.0.0",
-    "@tauri-apps/cli": "^1.5.8"
+    "vite": "^5.0.0"
   }
 }

src-tauri/tauri.conf.json

@@ -1,12 +1,12 @@
 {
   "build": {
-    "beforeDevCommand": "pnpm dev",
-    "beforeBuildCommand": "pnpm build",
-    "devPath": "http://localhost:3000",
+    "beforeDevCommand": "pnpm vite:dev",
+    "beforeBuildCommand": "pnpm vite:build",
+    "devPath": "http://localhost:8000",
     "distDir": "../dist"
   },
   "package": {
-    "productName": "tauri-react-demo",
+    "productName": "tauri-react-zerotier-toolkit",
     "version": "0.0.0"
   },
   "tauri": {
@@ -36,7 +36,7 @@
       {
         "fullscreen": false,
         "resizable": true,
-        "title": "tauri-react-demo",
+        "title": "ZeroTier Toolkit - Build By Tauri",
         "width": 800,
         "height": 600
       }

src/App.tsx

@@ -1,51 +1,59 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/tauri";
-import "./App.css";
+import { useState } from 'react';
+import { Button, Input } from '@nextui-org/react';
+import { invoke } from '@tauri-apps/api/tauri';
+import './App.css';
 
 function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
+  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 }));
+    setGreetMsg(await invoke('greet', {name}));
   }
 
   return (
-    <div className="container">
-      <h1>Welcome to Tauri!</h1>
+    <div className="w-full mt-28 flex flex-col justify-center items-center">
+      <h1 className="text-4xl font-extrabold">Welcome</h1>
 
-      <div className="row">
+      <div className="w-full mt-4 flex justify-center">
         <a href="https://vitejs.dev" target="_blank">
           <img src="/vite.svg" className="logo vite" alt="Vite logo" />
         </a>
         <a href="https://tauri.app" target="_blank">
           <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
         </a>
         <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+          <img src="/react.svg" className="logo react" alt="React logo" />
         </a>
       </div>
 
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
+      <p className="mt-4 font-bold">Build with Tauri, Vite, React, Next UI and Tailwind CSS</p>
 
       <form
-        className="row"
+        className="w-1/2 mt-4 flex"
         onSubmit={(e) => {
           e.preventDefault();
           greet();
         }}
       >
-        <input
-          id="greet-input"
+        <Input
+          className="mr-2"
+          label="Enter a name..."
+          size="sm"
+          radius="lg"
           onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a name..."
         />
-        <button type="submit">Greet</button>
+        <Button
+          color="primary"
+          size="lg"
+          type="submit"
+        >
+          Greet
+        </Button>
       </form>
 
-      <p>{greetMsg}</p>
+      <p className="mt-4 text-gray-600">{greetMsg}</p>
     </div>
   );
 }

src/main.tsx

@@ -1,10 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./styles.css";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles.css';
+import { NextUIProvider } from '@nextui-org/react';
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <NextUIProvider>
+      <App />
+    </NextUIProvider>
+  </React.StrictMode>
 );

src/styles.css

@@ -1,109 +1,19 @@
-: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;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 .logo {
-  height: 6em;
+  height: 7em;
   padding: 1.5em;
   will-change: filter;
   transition: 0.75s;
 }
 
-.logo.tauri:hover {
+.logo: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;
-  }
 }

tailwind.config.js

@@ -0,0 +1,16 @@
+const resolve = require('path').resolve
+const {nextui} = require("@nextui-org/react")
+
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        resolve(__dirname, 'index.html'),
+        resolve(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    darkMode: "class",
+    plugins: [nextui()],
+}

vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from 'tailwindcss';
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
@@ -11,7 +12,7 @@ export default defineConfig(async () => ({
   clearScreen: false,
   // 2. tauri expects a fixed port, fail if that port is not available
   server: {
-    port: 3000,
+    port: 8000,
     strictPort: true,
     watch: {
       // 3. tell vite to ignore watching `src-tauri`