feat: add basic layout

package.json

@@ -8,9 +8,14 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.2.5",
+    "antd": "^5.8.5",
+    "clsx": "^2.0.0",
     "express": "^4.18.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
     "vite-express": "^0.10.0"
@@ -21,7 +26,10 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.4",
+    "autoprefixer": "^10.4.15",
     "nodemon": "^2.0.22",
+    "postcss": "^8.4.29",
+    "tailwindcss": "^3.3.3",
     "vite": "^4.4.9"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/client/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/client/App.tsx

@@ -1,34 +1,33 @@
-import './App.css';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
-
+import { Layout } from './pages/Layout';
-import { useState } from 'react';
+import { Dashboard } from './pages/Dashboard';
-
+import { Login } from './pages/Login';
-import reactLogo from './assets/react.svg';
+import { Monitor } from './pages/Monitor';
+import { Website } from './pages/Website';
+import { Settings } from './pages/Settings';
+import { Servers } from './pages/Servers';
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
     <div className="App">
-      <div>
+      <BrowserRouter>
-        <a href="https://vitejs.dev" target="_blank">
+        <Routes>
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+          <Route element={<Layout />}>
-        </a>
+            <Route path="/dashboard" element={<Dashboard />} />
-        <a href="https://reactjs.org" target="_blank">
+            <Route path="/monitor" element={<Monitor />} />
-          <img src={reactLogo} className="logo react" alt="React logo" />
+            <Route path="/website" element={<Website />} />
-        </a>
+            <Route path="/servers" element={<Servers />} />
-      </div>
+            <Route path="/settings" element={<Settings />} />
-      <h1>Vite + React</h1>
+          </Route>
-      <div className="card">
+
-        <button onClick={() => setCount((count) => count + 1)}>
+          <Route path="/login" element={<Login />} />
-          count is {count}
+
-        </button>
+          <Route
-        <p>
+            path="*"
-          Edit <code>src/App.tsx</code> and save to test HMR
+            element={<Navigate to="/dashboard" replace={true} />}
-        </p>
+          />
-      </div>
+        </Routes>
-      <p className="read-the-docs">
+      </BrowserRouter>
-        Click on the Vite and React logos to learn more
-      </p>
     </div>
   );
 }

src/client/components/NavItem.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
+
+export const NavItem: React.FC<{
+  to: string;
+  label: string;
+}> = React.memo((props) => {
+  const location = useLocation();
+
+  const isCurrent = location.pathname === props.to;
+
+  return (
+    <Link to={props.to}>
+      <div
+        className={clsx('leading-[3.75rem] border-b-2', {
+          'text-gray-950 border-blue-500': isCurrent,
+          'text-gray-900 border-transparent hover:text-gray-950 hover:border-blue-500':
+            !isCurrent,
+        })}
+      >
+        {props.label}
+      </div>
+    </Link>
+  );
+});
+NavItem.displayName = 'NavItem';

src/client/index.css

@@ -1,69 +1,3 @@
-:root {
+@tailwind base;
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+@tailwind components;
-  line-height: 1.5;
+@tailwind utilities;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/client/main.tsx

@@ -1,11 +1,11 @@
-import "./index.css";
+import './index.css';
 
-import React from "react";
+import React from 'react';
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client';
 
-import App from "./App";
+import App from './App';
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

src/client/pages/Dashboard.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const Dashboard: React.FC = React.memo(() => {
+  return <div>Dashboard</div>;
+});
+Dashboard.displayName = 'Dashboard';

src/client/pages/Layout.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { NavItem } from '../components/NavItem';
+import { UserOutlined } from '@ant-design/icons';
+import { Button, Dropdown } from 'antd';
+
+export const Layout: React.FC = React.memo(() => {
+  return (
+    <div>
+      <div className="flex items-center bg-gray-100 px-4">
+        <div className="px-2 mr-10 font-bold">Tianji</div>
+        <div className="flex space-x-4">
+          <NavItem to="/dashboard" label="Dashboard" />
+          <NavItem to="/monitor" label="Monitor" />
+          <NavItem to="/website" label="Website" />
+          <NavItem to="/Servers" label="Servers" />
+          <NavItem to="/settings" label="Settings" />
+        </div>
+
+        <div className="flex-1" />
+
+        <div>
+          <Dropdown
+            placement="bottomRight"
+            menu={{
+              items: [
+                {
+                  key: 'logout',
+                  label: 'Logout',
+                },
+              ],
+            }}
+          >
+            <Button
+              shape="circle"
+              size="large"
+              icon={<UserOutlined />}
+            ></Button>
+          </Dropdown>
+        </div>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  );
+});
+Layout.displayName = 'Layout';

src/client/pages/Login.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const Login: React.FC = React.memo(() => {
+  return <div>Login</div>;
+});
+Login.displayName = 'Login';

src/client/pages/Monitor.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const Monitor: React.FC = React.memo(() => {
+  return <div>Monitor</div>;
+});
+Monitor.displayName = 'Monitor';

src/client/pages/Servers.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const Servers: React.FC = React.memo(() => {
+  return <div>Servers</div>;
+});
+Servers.displayName = 'Servers';

src/client/pages/Settings.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const Settings: React.FC = React.memo(() => {
+  return <div>Settings</div>;
+});
+Settings.displayName = 'Settings';

src/client/pages/Website.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const Website: React.FC = React.memo(() => {
+  return <div>Website</div>;
+});
+Website.displayName = 'Website';

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}