add app context

src/App.tsx

-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/core";
+import { createContext, useEffect, useState } from "react";
 import "./App.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Login from "./components/login/Login";
+import Register from "./components/login/Register";
+import Land from "./components/land/Land";
+import Notify from "./components/notify/Notify";
+import Sale from "./components/sale/Sale";
+import User from "./components/user/User";
+type AppContextType = {
+  theme: string;
+  tabIndex: number;
+  setTabIndex: any;
+  searchHis: string[];
+  setSearchHis: any;
+};
 
+const AppContext = createContext<AppContextType>({
+  theme: "light",
+  tabIndex: 0,
+  setTabIndex: null,
+  searchHis: [],
+  setSearchHis: null,
+});
 function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
+  const [theme, setTheme] = useState<string>("light");
+  const [searchHis, setSearchHis] = useState([]);
+  const [tabIndex, setTabIndex] = useState<number>(1);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const theme = mediaQuery.matches ? "dark" : "light";
+    setTheme(theme);
 
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke("greet", { name }));
-  }
+    const handleChange = () => {
+      setTheme(mediaQuery.matches ? "dark" : "light");
+    };
 
-  return (
-    <div className="container">
-      <h1>Welcome to Tauri!</h1>
-
-      <div className="row">
-        <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" />
-        </a>
-      </div>
-
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
+    mediaQuery.addListener(handleChange);
 
-      <form
-        className="row"
-        onSubmit={(e) => {
-          e.preventDefault();
-          greet();
-        }}
-      >
-        <input
-          className=" bg-green-300"
-          id="greet-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a name..."
-        />
-        <button type="submit">Greet</button>
-      </form>
-
-      <p>{greetMsg}</p>
-    </div>
+    return () => {
+      mediaQuery.removeListener(handleChange);
+    };
+  }, []);
+  return (
+    <AppContext.Provider
+      value={{
+        theme,
+        tabIndex,
+        setTabIndex,
+        searchHis,
+        setSearchHis,
+      }}
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Land />}></Route>
+          <Route path="/notify" element={<Notify />}></Route>
+          <Route path="/sale" element={<Sale />}></Route>
+          <Route path="/user" element={<User />}></Route>
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+        </Routes>
+      </BrowserRouter>
+    </AppContext.Provider>
   );
 }
-
+export { AppContext };
 export default App;