testing ui component lib

src-react/src/App.tsx

@@ -2,9 +2,10 @@ import "./App.css";
 
 import { useEffect, useState } from "react";
 
+import { Button, Field, Input, Stack } from "@chakra-ui/react";
 import { invoke } from "@tauri-apps/api/core";
 
-import reactLogo from "./assets/react.svg";
+import { Provider } from "./components/ui/provider";
 
 function App() {
   const [greetMsg, setGreetMsg] = useState("");
@@ -22,39 +23,26 @@ function App() {
   }
 
   return (
-    <main className="container">
-      <h1>Welcome to Tauri + React</h1>
-
-      <div className="row">
-        <a href="https://vite.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://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
-
-      <form
-        className="row"
-        onSubmit={(e) => {
-          e.preventDefault();
-          greet();
-        }}
-      >
-        <input
-          id="greet-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          autoComplete="off"
-          placeholder="Enter a name..."
-        />
-        <button type="submit">Greet</button>
-      </form>
-      <p>{greetMsg}</p>
-    </main>
+    <Provider>
+      <Stack maxW={"1000px"} margin={"0.5em auto"}>
+        <Field.Root
+          orientation={"horizontal"}
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
+          <Input
+            id="greet-input"
+            onChange={(e) => setName(e.currentTarget.value)}
+            autoComplete="off"
+            placeholder="Enter a name..."
+          />
+          <Button>Search</Button>
+        </Field.Root>
+        <p>{greetMsg}</p>
+      </Stack>
+    </Provider>
   );
 }