Implement about page

1 files changed, 1 insertions, 33 deletions

diff --git a/src/main.tsx b/src/main.tsx
index 85d2caf..496acc8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,8 +7,7 @@ import { StopList } from './pages/StopList.tsx'
 import { Estimates } from './pages/Estimates.tsx'
 import { StopMap } from './pages/Map.tsx'
 import { Layout } from './Layout.tsx'
-import { Sun, Moon } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { About } from './pages/About.tsx'
 
 const router = createBrowserRouter([
   {
@@ -33,37 +32,6 @@ const router = createBrowserRouter([
   }
 ])
 
-function About() {
-  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme) {
-      return savedTheme as 'light' | 'dark';
-    }
-    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    return prefersDark ? 'dark' : 'light';
-  });
-
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
-  };
-
-  return (
-    <div className="page-container about-page">
-      <h1 className="page-title">About InfoBus App</h1>
-      <p className="about-description">This application helps you find bus stops and check bus arrival estimates.</p>
-      <p className="about-version">Version 1.0.0</p>
-      <button className="theme-toggle" onClick={toggleTheme}>
-        {theme === 'light' ? <Moon size={24} /> : <Sun size={24} />}
-      </button>
-    </div>
-  )
-}
-
 createRoot(document.getElementById('root')!).render(
   <RouterProvider router={router} />,
 )