vhs · TyIsI · Oct 1, 2024 · Oct 1, 2024 · Oct 1, 2024 · Oct 2, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -19,7 +19,8 @@
         {
             "files": ["packages/frontend/**/*"],
             "options": {
-                "plugins": ["prettier-plugin-tailwindcss"]
+                "plugins": ["prettier-plugin-tailwindcss"],
+                "tailwindPreserveWhitespace": true
             }
         }
     ]

diff --git a/packages/frontend/eslint.config.js b/packages/frontend/eslint.config.js
@@ -18,6 +18,7 @@ export default tseslint.config(
             'react-refresh': reactRefresh
         },
         rules: {
+            '@typescript-eslint/no-unused-vars': 'off',
             ...reactHooks.configs.recommended.rules,
             'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]
         }

diff --git a/packages/frontend/generate-react-cli.json b/packages/frontend/generate-react-cli.json
@@ -1,16 +1,16 @@
 {
-  "usesTypeScript": true,
-  "usesStyledComponents": false,
-  "usesCssModule": true,
-  "cssPreprocessor": "scss",
-  "testLibrary": "Testing Library",
-  "component": {
-    "default": {
-      "path": "src/components",
-      "withStyle": true,
-      "withTest": true,
-      "withStory": true,
-      "withLazy": true
+    "usesTypeScript": true,
+    "usesStyledComponents": false,
+    "usesCssModule": true,
+    "cssPreprocessor": "scss",
+    "testLibrary": "Testing Library",
+    "component": {
+        "default": {
+            "path": "src/components",
+            "withStyle": false,
+            "withTest": true,
+            "withStory": true,
+            "withLazy": true
+        }
     }
-  }
-}
+}
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -3,11 +3,11 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
         <title>TACOS</title>
     </head>
     <body>
-        <div id="root"></div>
+        <div class="dark" id="root"></div>
         <script type="module" src="/src/main.tsx"></script>
     </body>
 </html>
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -3,6 +3,8 @@
         "generate-react-cli": "^8.4.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
+        "react-router-dom": "^6.27.0",
         "stylelint": "^16.9.0",
         "zod": "^3.23.8"
     },

diff --git a/packages/frontend/public/logo.png b/packages/frontend/public/logo.png
diff --git a/packages/frontend/public/react.svg b/packages/frontend/public/react.svg
diff --git a/packages/frontend/public/vite.svg b/packages/frontend/public/vite.svg
diff --git a/packages/frontend/src/components/App/App.css b/packages/frontend/src/components/App/App.css
@@ -1,45 +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;
-}

diff --git a/packages/frontend/src/components/App/App.tsx b/packages/frontend/src/components/App/App.tsx
@@ -1,34 +1,39 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { Routes, Route } from 'react-router-dom'
 import './App.css'
+import MobileBar from '../MobileBar/MobileBar'
+import Header from '../Header/Header'
+//import SideBarVertical from '../SideBarVertical/SideBarVertical'
+
+import HomePage from '../Pages/HomePage/HomePage'
+import DevicesPage from '../Pages/DevicesPage/DevicesPage'
+import TerminalsPage from '../Pages/TerminalsPage/TerminalsPage'
+import LogsPage from '../Pages/LogsPage/LogsPage'
 
 export function App() {
-    const [count, setCount] = useState(0)
+    const [isMobile, setIsMobile] = useState<boolean>(false)
+
+    const handleReize = () => {
+        setIsMobile(window.matchMedia('(max-width: 640px)').matches)
+    }
+
+    useEffect(() => {
+        handleReize()
+        window.addEventListener('resize', handleReize)
+        return () => window.removeEventListener('resize', handleReize)
+    }, [])
 
     return (
-        <>
-            <div className='flex flex-row'>
-                <div className='basis-1/2'>
-                    <a href='https://vitejs.dev' target='_blank'>
-                        <img src={'/vite.svg'} className='logo m-auto' alt='Vite logo' />
-                    </a>
-                </div>
-                <div className='basis-1/2'>
-                    <a href='https://react.dev' target='_blank'>
-                        <img src={'/react.svg'} className='logo m-auto' alt='React logo' />
-                    </a>
-                </div>
-            </div>
-            <h1 className='text-3xl font-bold underline' data-testid='App'>
-                TACOS
-            </h1>
-            <div className='card'>
-                <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-                <p>
-                    Edit <code>src/App.tsx</code> and save to test HMR
-                </p>
-            </div>
-            <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
-        </>
+        <div>
+            <Header />
+            {isMobile ? <MobileBar /> : <MobileBar />}
+            <Routes>
+                <Route path='/' element={<HomePage />} />
+                <Route path='/devices' element={<DevicesPage />} />
+                <Route path='/terminals' element={<TerminalsPage />} />
+                <Route path='/logs' element={<LogsPage />} />
+            </Routes>
+        </div>
     )
 }
 

diff --git a/packages/frontend/src/components/Header/DarkModeToggle/DarkModeToggle.stories.tsx b/packages/frontend/src/components/Header/DarkModeToggle/DarkModeToggle.stories.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import DarkModeToggle from './DarkModeToggle';
+
+export default {
+  title: "DarkModeToggle",
+};
+
+export const Default = () => <DarkModeToggle />;
+
+Default.story = {
+  name: 'default',
+};
diff --git a/packages/frontend/src/components/Header/DarkModeToggle/DarkModeToggle.tsx b/packages/frontend/src/components/Header/DarkModeToggle/DarkModeToggle.tsx
@@ -0,0 +1,41 @@
+import { FC, useState, useEffect } from 'react'
+import { FaMoon, FaS, FaSun } from 'react-icons/fa6'
+
+const DarkModeToggle: FC = () => {
+    const DM_KEY = 'dark-mode-key'
+    const [isDarkMode, setIsDarkMode] = useState(() => {
+        const savedValue = localStorage.getItem(DM_KEY)
+        return savedValue ? JSON.parse(savedValue) : true
+    })
+
+    const handleToggle = () => {
+        setIsDarkMode(!isDarkMode)
+        if (!isDarkMode) {
+            document.getElementById('root')?.classList.add('dark')
+            document.getElementById('root')?.classList.remove('light')
+        } else {
+            document.getElementById('root')?.classList.add('light')
+            document.getElementById('root')?.classList.remove('dark')
+        }
+    }
+
+    useEffect(() => {
+        localStorage.setItem(DM_KEY, JSON.stringify(isDarkMode))
+    }, [isDarkMode])
+
+    return (
+        <div
+            onClick={handleToggle}
+            className='bg-card flex h-11 w-20 items-center rounded-full p-1 transition-colors duration-300'
+        >
+            <div
+                className={`flex h-7 w-7 items-center justify-center rounded-full bg-transparent transition-transform duration-300
+                ${isDarkMode ? 'translate-x-[44px]' : 'translate-x-0'}`}
+            >
+                {isDarkMode ? <FaMoon className='text-white' size={22} /> : <FaSun size={20} />}
+            </div>
+        </div>
+    )
+}
+
+export default DarkModeToggle
diff --git a/packages/frontend/src/components/Header/Header.stories.tsx b/packages/frontend/src/components/Header/Header.stories.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import Header from './Header';
+
+export default {
+  title: "Header",
+};
+
+export const Default = () => <Header />;
+
+Default.story = {
+  name: 'default',
+};
diff --git a/packages/frontend/src/components/Header/Header.tsx b/packages/frontend/src/components/Header/Header.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import DarkModeToggle from './DarkModeToggle/DarkModeToggle'
+import VHS from './logo.png'
+
+const Header: FC = () => {
+    return (
+        <div className='bg-header-body p-2'>
+            <div className='flex justify-between'>
+                <div className='flex'>
+                    <img src={VHS} alt='VHS' className='mr-2 h-12 w-28'></img>
+                    <div className='font-teko text-header-text text-6xl font-bold leading-[56px]'>TACOS</div>
+                </div>
+                <DarkModeToggle />
+            </div>
+        </div>
+    )
+}
+
+export default Header
diff --git a/packages/frontend/src/components/Header/Subheader.tsx b/packages/frontend/src/components/Header/Subheader.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react'
+
+interface SubheaderProps {
+    text: string
+}
+
+const Subheader: FC<SubheaderProps> = (props) => {
+    return (
+        <div className='bg-header-body p-2'>
+            <div className='flex justify-between'>
+                <div className='font-teko text-header-text ml-4 text-5xl font-bold underline'>{props.text}</div>
+            </div>
+        </div>
+    )
+}
+
+export default Subheader
diff --git a/packages/frontend/src/components/Header/logo.png b/packages/frontend/src/components/Header/logo.png
diff --git a/packages/frontend/src/components/MobileBar/MobileBar.css b/packages/frontend/src/components/MobileBar/MobileBar.css
@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .navbar {
+        @apply bg-navbar-body text-navbar-text fixed bottom-0 
+        left-0 flex w-screen translate-y-0 flex-col
+        transition-all duration-300;
+    }
+
+    .navbar-collapsed {
+        @apply translate-y-full;
+    }
+
+    .navbar-button {
+        @apply bg-navbar-grad-dark flex size-[74px] 
+        flex-col items-center justify-center 
+        rounded-xl bg-gradient-to-tr pt-1 shadow-lg;
+    }
+
+    .navbar-icon {
+        @apply mb-1;
+    }
+
+    .navbar-icon-text {
+        @apply font-teko text-lg font-medium;
+    }
+}
diff --git a/packages/frontend/src/components/MobileBar/MobileBar.stories.tsx b/packages/frontend/src/components/MobileBar/MobileBar.stories.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import MobileBar from './MobileBar';
+
+export default {
+  title: "MobileBar",
+};
+
+export const Default = () => <MobileBar />;
+
+Default.story = {
+  name: 'default',
+};