First implementation of Plimi

src/app/App.tsx

@@ -0,0 +1,6 @@
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
+
+export function App() {
+  return <RouterProvider router={router} />;
+}

src/app/ThemeContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export type ThemeContextType = {
+  dark: boolean;
+  toggleTheme: () => void;
+};
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

src/app/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import { ThemeContext } from "./ThemeContext";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [dark, setDark] = useState(false);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (dark) {
+      root.classList.add('plimi-theme-dark');
+      root.classList.remove('plimi-theme-light');
+    } else {
+      root.classList.add('plimi-theme-light');
+      root.classList.remove('plimi-theme-dark');
+    }
+  }, [dark]);
+
+  const toggleTheme = () => setDark(!dark);
+
+  return (
+    <ThemeContext.Provider value={{ dark, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

src/app/router.tsx

@@ -0,0 +1,31 @@
+import { createBrowserRouter } from "react-router-dom";
+import { AppShell } from "../components/layout/AppShell";
+import { HomePage } from "../pages/HomePage";
+import { ToolsPage } from "../pages/ToolsPage";
+import { ToolDetailPage } from "../pages/ToolDetailPage";
+import { HowItWorksPage } from "../pages/HowItWorksPage";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <AppShell />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: "tools",
+        element: <ToolsPage />,
+      },
+      {
+        path: "tools/:toolId",
+        element: <ToolDetailPage />,
+      },
+      {
+        path: "how-it-works",
+        element: <HowItWorksPage />,
+      },
+    ],
+  },
+]);

src/app/useTheme.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext";
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}