feat: frontend draft

Author: imiskii

frontend/src/App.css

@@ -1,36 +1,13 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
+import ThemeProvider from './context/ThemeContext';
+import MainPage from './pages/MainPage';
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</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>
-    </>
+    <ThemeProvider>
+      <MainPage/>
+    </ThemeProvider>
   )
 }
 
-export default App
+export default App;

frontend/src/App.tsx

@@ -0,0 +1,13 @@
+
+
+function SearchBar() {
+
+
+  return (
+    <div className="search-bar">
+      
+    </div>
+  );
+}
+
+export default SearchBar;

frontend/src/assets/react.svg

@@ -0,0 +1,18 @@
+import '../styles/ThemeSwitch.css'
+
+type ThemeSwitchProps = {
+  theme: string;
+  toggleTheme: () => void;
+}
+
+function ThemeSwitch({ theme, toggleTheme }: ThemeSwitchProps) {
+  return (
+    <div className="theme-switch">
+      <button onClick={toggleTheme}>
+            Theme: {theme}
+      </button>
+    </div>
+  );
+}
+
+export default ThemeSwitch;

frontend/src/components/SearchBar.tsx

@@ -0,0 +1,14 @@
+import ThemeSwitchContainer from "../containers/ThemeSwitchContainer";
+
+
+function ToolBar() {
+
+  return (
+    <div className="tool-bar">
+      <ThemeSwitchContainer/>
+
+    </div>
+  );
+}
+
+export default ToolBar;

frontend/src/components/ThemeSwitch.tsx

@@ -0,0 +1,16 @@
+import ToolBarContainer from "../containers/ToolBarContainer";
+import SearchBarContainer from "../containers/SearchBarContainer";
+import '../styles/TopBar.css'
+
+function TopBar() {
+
+  return (
+    <div className="top-bar">
+      <ToolBarContainer/>
+      <h1>TaskBoard</h1>
+      <SearchBarContainer/>
+    </div>
+  );
+}
+
+export default TopBar;

frontend/src/components/ToolBar.tsx

@@ -0,0 +1,11 @@
+import SearchBar from "../components/SearchBar";
+
+
+function SearchBarContainer() {
+
+  return (
+    <SearchBar/>
+  );
+}
+
+export default SearchBarContainer;

frontend/src/components/TopBar.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '../context/ThemeContext';
+import ThemeSwitch from "../components/ThemeSwitch";
+
+function ThemeSwitchContainer() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <ThemeSwitch theme={theme} toggleTheme={toggleTheme} />
+  );
+}
+
+export default ThemeSwitchContainer;

frontend/src/containers/SearchBarContainer.tsx

@@ -0,0 +1,12 @@
+import ToolBar from "../components/ToolBar";
+
+
+function ToolBarContainer() {
+
+
+  return (
+    <ToolBar/>
+  );
+}
+
+export default ToolBarContainer;