feat: integrate with react router

Author: zeevenn

eslint.config.js

@@ -19,5 +19,8 @@ export default tseslint.config([
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      'react-refresh/only-export-components': 'off'
+    }
   },
 ])

package.json

@@ -24,6 +24,7 @@
     "@tailwindcss/vite": "^4.1.13",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-router": "^7.9.1",
     "tailwindcss": "^4.1.13"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,14 +1,19 @@
+import { BrowserRouter, Routes, Route } from 'react-router';
 import { Layout } from "./components/layout";
-import { DiffEditor } from "./components/DiffEditor";
+import { TextDiff } from "./pages";
 import { useDynamicFavicon } from "./hooks/useDynamicFavicon";
 
 function App() {
   useDynamicFavicon();
 
   return (
-    <Layout>
-      <DiffEditor />
-    </Layout>
+    <BrowserRouter>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<TextDiff />} />
+        </Routes>
+      </Layout>
+    </BrowserRouter>
   );
 }
 

src/App.tsx

@@ -1,18 +1,18 @@
 import { useState, useRef } from 'react';
-import { DiffEditor as MonacoDiffEditor, type MonacoDiffEditor as MonacoDiffEditorType } from '@monaco-editor/react';
-import { useTheme } from '../hooks/useTheme';
+import { DiffEditor, type MonacoDiffEditor } from '@monaco-editor/react';
+import { useTheme } from '../../hooks/useTheme';
 
-interface DiffEditorProps {
+interface TextDiffProps {
   className?: string;
 }
 
-export const DiffEditor = ({ className = '' }: DiffEditorProps) => {
+export const TextDiff = ({ className = '' }: TextDiffProps) => {
   const [originalText, setOriginalText] = useState('function hello() {\n  console.log("Hello World");\n}');
   const [modifiedText, setModifiedText] = useState('function hello() {\n  console.log("Hello, World!");\n  return "Hello";\n}');
-  const editorRef = useRef<MonacoDiffEditorType | null>(null);
+  const editorRef = useRef<MonacoDiffEditor | null>(null);
   const { theme } = useTheme();
 
-  const handleEditorDidMount = (editor: MonacoDiffEditorType) => {
+  const handleEditorDidMount = (editor: MonacoDiffEditor) => {
     editorRef.current = editor;
   };
 
@@ -64,7 +64,7 @@ export const DiffEditor = ({ className = '' }: DiffEditorProps) => {
       </div>
 
       {/* Diff Editor */}
-      <MonacoDiffEditor
+      <DiffEditor
         wrapperProps={{
           className: 'flex-1',
         }}

src/components/DiffEditor.tsx renamed to src/components/diff/TextDiff.tsx

@@ -1,22 +1,31 @@
-import { Logo } from '../ui/Logo';
+import { Link } from "react-router";
+import { Logo, NavigationLink } from "../ui";
 
 interface HeaderProps {
   className?: string;
 }
 
-export const Header = ({ className = '' }: HeaderProps) => {
+export const Header = ({ className = "" }: HeaderProps) => {
   return (
-    <header className={`bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 shadow-sm ${className}`}>
+    <header
+      className={`bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 shadow-sm ${className}`}
+    >
       <div className="mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
-          {/* Logo */}
-          <div className="flex items-center">
-            <div className="flex-shrink-0 flex items-center space-x-3">
+          <div className="flex items-center space-x-6">
+            {/* Logo */}
+            <Link to="/" className="flex-shrink-0 flex items-center space-x-3">
               <Logo className="w-10 h-10" />
               <h1 className="text-xl font-bold text-gray-900 dark:text-white">
                 Diff Viewer
               </h1>
-            </div>
+            </Link>
+
+            {/* Navigation */}
+            <nav className="flex space-x-6">
+              <NavigationLink to="/">Text Diff</NavigationLink>
+              <NavigationLink to="/image">Image Diff</NavigationLink>
+            </nav>
           </div>
 
           {/* Actions */}

src/components/layout/Header.tsx

@@ -0,0 +1,26 @@
+import { Link, useLocation } from 'react-router';
+
+interface NavigationLinkProps {
+  to: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const NavigationLink = ({ to, children, className = '' }: NavigationLinkProps) => {
+  const location = useLocation();
+  const isActive = (path: string) => location.pathname === path;
+
+  
+  return (
+    <Link
+      to={to}
+      className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+        isActive(to) 
+          ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20' 
+          : 'text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
+      } ${className}`}
+    >
+      {children}
+    </Link>
+  );
+};

src/components/ui/NavigationLink.tsx

@@ -0,0 +1,3 @@
+export * from './Logo';
+export * from './NavigationLink';
+export * from './Divider';

src/components/ui/index.tsx

@@ -0,0 +1,9 @@
+import { TextDiff as TextDiffEditor } from "../components/diff/TextDiff";
+
+export const TextDiff = () => {
+  return (
+    <div className="flex-1 flex flex-col">
+      <TextDiffEditor />
+    </div>
+  );
+};

src/pages/TextDiff.tsx

@@ -0,0 +1 @@
+export { TextDiff } from './TextDiff';