import { useState, useEffect } from 'react'; import { Sun, Moon, Type, Code, Calculator, Palette, CheckSquare, Search, Sparkles, ArrowLeft, Info, Mail, ShieldCheck, FileWarning, BookOpen } from 'lucide-react'; import { CATEGORIES, TOOLS } from './toolsData'; import { renderToolComponent } from './components/tools/ToolRenderer'; import { AboutPage, ContactPage, PrivacyPage, DisclaimerPage, BlogPage } from './components/Pages'; import { PageView, CategoryId } from './types'; export default function App() { const [currentView, setCurrentView] = useState('home'); const [searchQuery, setSearchQuery] = useState(''); const [selectedCategory, setSelectedCategory] = useState('all'); const [theme, setTheme] = useState<'light' | 'dark'>(() => { if (typeof window !== 'undefined') { const saved = localStorage.getItem('multi-tool-theme'); if (saved === 'dark' || saved === 'light') return saved; return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } return 'light'; }); // Apply dark mode class to root HTML useEffect(() => { const root = window.document.documentElement; if (theme === 'dark') { root.classList.add('dark'); } else { root.classList.remove('dark'); } localStorage.setItem('multi-tool-theme', theme); }, [theme]); const toggleTheme = () => { setTheme(theme === 'light' ? 'dark' : 'light'); }; const getCategoryIcon = (iconName: string) => { switch (iconName) { case 'Type': return ; case 'Code': return ; case 'Calculator': return ; case 'Palette': return ; case 'CheckSquare': return ; default: return ; } }; // Filter 30 tools based on search query or category selections const filteredTools = TOOLS.filter((tool) => { const matchesCategory = selectedCategory === 'all' || tool.category === selectedCategory; const matchesSearch = tool.name.toLowerCase().includes(searchQuery.toLowerCase()) || tool.description.toLowerCase().includes(searchQuery.toLowerCase()) || tool.keywords.some((k) => k.toLowerCase().includes(searchQuery.toLowerCase())); return matchesCategory && matchesSearch; }); const activeTool = TOOLS.find((t) => t.id === currentView); return (
{/* 1. NAVIGATION BAR */}
{ setCurrentView('home'); setSearchQuery(''); setSelectedCategory('all'); }}> Utility Hub
{/* Short Navigation Menu */}
{/* MAIN VIEWPORT LAYOUT */}
{/* Left Sidebar: Categorized Hero Menu */} {/* Main Content Area */}
{currentView === 'home' && (
{/* 2. HERO MENU & SEARCH BAR */}
SECURE CLIENT-SIDE UTILITIES

UNIFIED
toolbox.

Thirty professional-grade browser-based utilities optimized for speed, privacy, and precision. No accounts or API keys required. All text, calculations, and assets process entirely in your web client.

{/* Instant Search Bar */}
setSearchQuery(e.target.value)} />
{/* Categories Slider */}
FILTER BY CATEGORY
{CATEGORIES.map((cat) => ( ))}
{/* 3. TOOLS LISTING GRID */}

{selectedCategory === 'all' ? 'Core Catalog' : CATEGORIES.find(c => c.id === selectedCategory)?.name}

Click any tool below to open its dedicated browser-based environment

{filteredTools.length} UTILITIES FOUND
{filteredTools.length === 0 ? (

No matching tools found

Try adjusting your search filters or terms

) : (
{filteredTools.map((tool, index) => (
{ setCurrentView(tool.id); window.scrollTo({ top: 0, behavior: 'smooth' }); }} className="group cursor-pointer bg-white dark:bg-slate-900 p-6 rounded-lg border border-slate-200 dark:border-slate-800 hover:bg-[#f6f6f2] dark:hover:bg-slate-900/40 hover:border-slate-400 dark:hover:border-slate-600 transition-all flex flex-col justify-between shadow-xs relative" >
{(index + 1).toString().padStart(2, '0')}. {CATEGORIES.find((c) => c.id === tool.category)?.name}

{tool.name}

{tool.description}

Open Workspace →
))}
)}
)} {/* 4. WORKSPACE FOR INDIVIDUAL TOOL */} {activeTool && (
{/* Header / Back Action */}

{activeTool.name}

{activeTool.description}

{/* Badges */}
{CATEGORIES.find((c) => c.id === activeTool.category)?.name} LOCAL SECURE
{/* Render Selected Tool Interactive Interface */}
{renderToolComponent(activeTool.id)}
{/* Keyword Optimized SEO Content & FAQ Block */}
Knowledge & SEO Base

{activeTool.seoTitle}

{/* Dynamic rendering of rich text SEO content */}
{activeTool.seoContent}
{/* Extra keyword tags block */}
Keywords optimized:
{activeTool.keywords.map((kw) => ( {kw} ))}
)} {/* 5. ABOUT PAGE VIEW */} {currentView === 'about' && (
)} {/* 6. CONTACT PAGE VIEW */} {currentView === 'contact' && (
)} {/* 7. PRIVACY POLICY VIEW */} {currentView === 'privacy' && (
)} {/* 8. DISCLAIMER VIEW */} {currentView === 'disclaimer' && (
)} {/* 9. BLOG FEED VIEW */} {currentView === 'blog' && (
)}
{/* FOOTER AREA */}
); }