Merge pull request #1 from karishmashuklaa/develop

feat: ui base

ui/package.json

@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tremor/react": "^3.14.1",
+    "antd": "^5.15.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.22.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",

ui/src/App.tsx

@@ -1,12 +1,22 @@
-function App() {
+import Topbar from "./components/Topbar";
+import Sidebar from "./components/Sidebar";
+import { ConfigProvider } from 'antd';
+import { BrowserRouter } from 'react-router-dom'
 
-  return (
-    <>
-      <h1 className="text-3xl font-bold underline">
-        Hello world!
-      </h1>
-    </>
-  )
-}
+const App = () => (
+  <ConfigProvider
+    theme={{
+      token: {
+        colorPrimary: '#ff00c3',
+        borderRadius: 2,
+      },
+    }}
+  >
+    <BrowserRouter>
+      <Topbar />
+      <Sidebar />
+    </BrowserRouter>
+  </ConfigProvider>
+);
 
-export default App
+export default App;

ui/src/components/Sidebar/index.tsx

@@ -0,0 +1,32 @@
+import { Layout, Menu } from "antd";
+import { Link } from "react-router-dom";
+
+const { Sider } = Layout;
+
+const Sidebar = () => {
+    return (
+        <Sider
+            className="h-screen bg-white text-gray-800 fixed top-16 left-0 flex flex-col justify-between shadow-xl"
+            width={250}
+        >
+            <div className="flex flex-col justify-between h-full mt-32">
+                <Menu mode="vertical">
+                    <Menu.Item key="1">
+                        <Link to="/bots">Bots</Link>
+                    </Menu.Item>
+                    <Menu.Item key="2">
+                        <Link to="/workflow">Workflow</Link>
+                    </Menu.Item>
+                    <Menu.Item key="3">
+                        <Link to="/analytics">Analytics</Link>
+                    </Menu.Item>
+                    <Menu.Item key="4">
+                        <Link to="/api">API</Link>
+                    </Menu.Item>
+                </Menu>
+            </div>
+        </Sider>
+    );
+};
+
+export default Sidebar;

ui/src/components/Topbar/index.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { Layout, Menu, Col, Drawer } from "antd";
+import { Link } from "react-router-dom";
+import { FaBars } from "react-icons/fa";
+
+const { Header } = Layout;
+
+const Topbar = () => {
+  const [visible, setVisible] = useState(false);
+
+  const showDrawer = () => setVisible(true);
+  const hideDrawer = () => setVisible(false);
+
+  return (
+    <Header className="flex justify-between items-center h-16 bg-white shadow-md">
+      <Col span={4} className="flex items-center">
+        <Link to="/">
+          <img src="maxun_logo.png" alt="Maxun" className="h-8 w-auto" />
+        </Link>
+      </Col>
+      <Col span={16} className="hidden lg:flex justify-end">
+        <Menu mode="horizontal">
+          <Menu.Item key="1">
+            <Link to="/dashboard">Dashboard</Link>
+          </Menu.Item>
+          <Menu.Item key="2">
+            <Link to="/credits">Credits</Link>
+          </Menu.Item>
+          <Menu.Item key="3">
+            <Link to="/profile">Profile</Link>
+          </Menu.Item>
+        </Menu>
+      </Col>
+      <Col span={4} className="lg:hidden flex justify-end">
+        <FaBars className="text-2xl text-gray-600" />
+        <button className="text-gray-600 focus:outline-none" onClick={showDrawer}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="w-6 h-6"
+          >
+            <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" />
+          </svg>
+        </button>
+      </Col>
+      <Drawer
+        title="Navigation"
+        placement="right"
+        closable={false}
+        onClose={hideDrawer}
+        open={visible}
+        getContainer={() => document.body} // Ensure the drawer covers viewport on mobile
+      >
+        <Menu mode="vertical">
+          <Menu.Item key="1">
+            <Link to="/dashboard" onClick={hideDrawer}>
+              Dashboard
+            </Link>
+          </Menu.Item>
+          <Menu.Item key="2">
+            <Link to="/credits" onClick={hideDrawer}>Credits</Link>
+          </Menu.Item>
+          <Menu.Item key="3">
+            <Link to="/profile" onClick={hideDrawer}>Profile</Link>
+          </Menu.Item>
+        </Menu>
+      </Drawer>
+    </Header>
+  );
+};
+
+export default Topbar;

ui/src/main.tsx

@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+)