chore: dashboard

src/App.css

@@ -1,7 +0,0 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafb);
-}

src/App.tsx

@@ -1,11 +0,0 @@
-import "./App.css";
-
-function App() {
-  return (
-    <div className="container">
-      ChatGPT
-    </div>
-  );
-}
-
-export default App;

src/layout/index.scss

@@ -0,0 +1,13 @@
+.chat-logo {
+  text-align: center;
+  padding: 5px 0;
+
+  img {
+    width: 48px;
+    height: 48px;
+  }
+}
+
+.chat-container {
+  padding: 20px;
+}

src/layout/index.tsx

@@ -0,0 +1,57 @@
+import { FC, useState } from 'react';
+import {
+  DesktopOutlined,
+  BulbOutlined
+} from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Layout, Menu } from 'antd';
+import './index.scss';
+
+const { Content, Footer, Sider } = Layout;
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem('General', 'general', <DesktopOutlined />),
+  getItem('ChatGPT Prompts', 'chatgpt-prompts', <BulbOutlined />),
+];
+
+interface ChatLayoutProps {
+  children: React.ReactNode;
+}
+
+const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider theme="light" collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
+        <div className="chat-logo"><img src="/logo.png" /></div>
+        <Menu defaultSelectedKeys={['1']} mode="inline" items={items} />
+      </Sider>
+      <Layout className="chat-layout">
+        <Content className="chat-container">
+          {children}
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>
+          <a href="https://github.com/lencx/chatgpt" target="_blank">ChatGPT Desktop Application</a> ©2022 Created by lencx</Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default ChatLayout;

src/main.scss

@@ -0,0 +1,20 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #2a2a2a;
+  background-color: #f6f6f6;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+}

src/main.tsx

@@ -1,11 +1,16 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode, Suspense } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import ReactDOM from 'react-dom/client';
 
-import App from "./App";
-import "./style.css";
+import Routes from './routes';
+import './main.scss';
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <Suspense fallback={null}>
+      <BrowserRouter>
+        <Routes />
+      </BrowserRouter>
+    </Suspense>
+  </StrictMode>
 );

src/routes.tsx

@@ -0,0 +1,22 @@
+import { useLayoutEffect } from 'react';
+import { useLocation, useRoutes } from 'react-router-dom';
+import type { RouteObject } from 'react-router-dom';
+
+import App from '@view/App';
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <App />
+  }
+];
+
+export default () => {
+  const location = useLocation();
+  const pathname = location.pathname;
+  useLayoutEffect(() => {
+    const name = pathname.substring(1).replace(/\//gi, '_');
+    document.body.className = `${name ? name : 'main'}_screen`
+  }, [pathname]);
+  return useRoutes(routes);
+};

src/style.css

@@ -1,102 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: flex;
-  justify-content: center;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-}

src/view/App.tsx

@@ -0,0 +1,9 @@
+import Layout from "@layout/index";
+
+export default function Dashboard() {
+  return (
+    <Layout>
+      Hello
+    </Layout>
+  )
+}