feat: Add Crontab Generator and refactor navigation to use React Router for URL-based routing.

Author: mor-dunv

README.md

@@ -14,6 +14,7 @@ A sleek collection of developer tools built with React + Vite. Runs entirely in-
 | **Password Gen** | Generate secure random passwords with configurable options |
 | **Hash Generator** | Generate MD5 and bcrypt hashes |
 | **Basic Auth** | Generate HTTP headers and Nginx/Apache htpasswd entries |
+| **Crontab Gen** | Generate, explain, and validate cron expressions with UTC time |
 
 ## Quick Start
 

package-lock.json

@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "bcryptjs": "^3.0.3",
+    "cronstrue": "^3.11.0",
     "lucide-react": "^0.460.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.13.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

package.json

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import {
   ArrowRightLeft,
   ShieldCheck,
@@ -7,7 +7,8 @@ import {
   AlignLeft,
   KeyRound,
   Hash,
-  Lock
+  Lock,
+  CalendarClock
 } from 'lucide-react';
 
 // Layout components
@@ -22,12 +23,10 @@ import {
   CharacterCount,
   PasswordGenerator,
   HashGenerator,
-  BasicAuthGenerator
+  BasicAuthGenerator,
+  CrontabGenerator
 } from './features';
 
-// UI components
-import { Card } from './components/ui';
-
 /**
  * Navigation configuration
  */
@@ -40,6 +39,7 @@ const NAV_ITEMS = [
   { id: 'password', label: 'Password Gen', icon: Lock },
   { id: 'hash', label: 'Hash Generator', icon: Hash },
   { id: 'basicauth', label: 'Basic Auth', icon: KeyRound },
+  { id: 'crontab', label: 'Crontab Gen', icon: CalendarClock },
 ];
 
 /**
@@ -54,31 +54,44 @@ const FEATURE_COMPONENTS = {
   password: PasswordGenerator,
   hash: HashGenerator,
   basicauth: BasicAuthGenerator,
+  crontab: CrontabGenerator,
 };
 
 /**
  * Main Application Component
  */
 const App = () => {
-  const [activeTab, setActiveTab] = useState('debezium');
-
-  const activeNavItem = NAV_ITEMS.find(i => i.id === activeTab);
-  const ActiveFeature = FEATURE_COMPONENTS[activeTab];
+  const location = useLocation();
+  // Extract feature ID from path (e.g., "/crontab" -> "crontab")
+  const currentId = location.pathname.substring(1) || 'debezium';
+  const activeNavItem = NAV_ITEMS.find(i => i.id === currentId) || NAV_ITEMS[0];
 
   return (
     <div className="flex h-screen w-full bg-slate-950 text-slate-200 font-sans selection:bg-blue-500/30">
-      <Sidebar
-        navItems={NAV_ITEMS}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      />
+      <Sidebar navItems={NAV_ITEMS} />
 
       <div className="flex-1 flex flex-col overflow-hidden w-full">
         <Header title={activeNavItem?.label} />
 
-        <main className="flex-1 overflow-hidden p-4 md:p-6 relative">
+        <main className="flex-1 overflow-y-auto p-4 md:p-6 relative">
           <div className="h-full w-full max-w-6xl mx-auto">
-            {ActiveFeature && <ActiveFeature />}
+            <Routes>
+              <Route path="/" element={<Navigate to="/debezium" replace />} />
+
+              {NAV_ITEMS.map(item => {
+                const Component = FEATURE_COMPONENTS[item.id];
+                return (
+                  <Route
+                    key={item.id}
+                    path={`/${item.id}`}
+                    element={<Component />}
+                  />
+                );
+              })}
+
+              {/* Fallback for unknown routes */}
+              <Route path="*" element={<Navigate to="/debezium" replace />} />
+            </Routes>
           </div>
         </main>
       </div>

src/App.jsx

@@ -55,7 +55,7 @@ const BasicAuthGenerator = () => {
     };
 
     return (
-        <div className="flex flex-col gap-6 max-w-2xl mx-auto mt-8">
+        <div className="flex flex-col gap-6 max-w-2xl mx-auto">
             <Card title="Basic Auth Generator">
                 <div className="flex flex-col gap-6">
                     {/* Credentials Input */}