diff --git a/package.json b/package.json
index 43955af..3b669bd 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,8 @@
},
"dependencies": {
"@headlessui/tailwindcss": "^0.2.0",
+ "@heroicons/react": "^2.1.1",
+ "@tremor/react": "^3.13.3",
"axios": "^1.6.7",
"cheerio": "^1.0.0-rc.12",
"electron-squirrel-startup": "^1.0.0",
diff --git a/src/app/index.tsx b/src/app/index.tsx
index afa1372..4309f01 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,13 +1,11 @@
import { ClientProcess } from "./appx";
+import Navbar from "./navbar";
import { createRoot } from "react-dom/client";
const root = createRoot(document.body);
root.render(
-
-
- Hi Tailwind has been integrated.
-
-
Hello from React!
+
+
);
diff --git a/src/app/navbar.tsx b/src/app/navbar.tsx
new file mode 100644
index 0000000..74d0d7f
--- /dev/null
+++ b/src/app/navbar.tsx
@@ -0,0 +1,210 @@
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Disclosure, Menu, Transition } from "@headlessui/react";
+
+import { Fragment } from "react";
+
+const navigation = [
+ { name: "Dashboard", href: "/" },
+ { name: "Playground", href: "/playground" },
+];
+
+function classNames(...classes: string[]) {
+ return classes.filter(Boolean).join(" ");
+}
+
+export default function Navbar({ user }: { user: any }) {
+ const pathname = "";
+
+ const signOut = () => {
+ console.log("sign out");
+ };
+
+ const signIn = () => {
+ console.log("sign in");
+ };
+
+ return (
+
+ {({ open }) => (
+ <>
+
+
+
+
+
+
+
+
+ Open main menu
+ {open ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+ {navigation.map((item) => (
+
+ {item.name}
+
+ ))}
+
+
+ {user ? (
+ <>
+
+
+ {/* */}
+
+
+
+ {user.name}
+
+
+ {user.email}
+
+
+
+
+
+
+ >
+ ) : (
+
+
+
+ )}
+
+
+ >
+ )}
+
+ );
+}
diff --git a/src/index.html b/src/index.html
index 219d54b..d797b62 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,10 +3,5 @@
Hello World!
-
-
-
💖 Hello World!
-
Welcome to your Electron application.
-