feat: comprehensive SEO optimization and GDPR compliance
- Added Terms of Service and Privacy Policy pages with contact info - Implemented Google Analytics with Consent Mode v2 for GDPR compliance - Created sitemap.xml and robots.txt for search engine optimization - Added dynamic meta tags, Open Graph, and structured data (JSON-LD) - Implemented GDPR consent banner with TCF 2.2 compatibility - Enhanced sidebar with category-colored hover states and proper active/inactive styling - Fixed all ESLint warnings for clean deployment - Added comprehensive SEO utilities and privacy-first analytics tracking Ready for production deployment with full legal compliance and SEO optimization.
This commit is contained in:
dwindown
191
src/components/ConsentBanner.js
Normal file
191
src/components/ConsentBanner.js
Normal file
@@ -0,0 +1,191 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { X, Shield, Settings, Check } from 'lucide-react';
|
||||
import {
|
||||
shouldShowConsentBanner,
|
||||
updateConsent,
|
||||
CONSENT_CONFIGS,
|
||||
getConsentBannerData
|
||||
} from '../utils/consentManager';
|
||||
|
||||
const ConsentBanner = () => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [showCustomize, setShowCustomize] = useState(false);
|
||||
const [customConsent, setCustomConsent] = useState({
|
||||
analytics_storage: false,
|
||||
ad_storage: false,
|
||||
ad_personalization: false,
|
||||
ad_user_data: false
|
||||
});
|
||||
|
||||
const bannerData = getConsentBannerData();
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(shouldShowConsentBanner());
|
||||
}, []);
|
||||
|
||||
const handleAcceptAll = () => {
|
||||
updateConsent(CONSENT_CONFIGS.ACCEPT_ALL);
|
||||
setIsVisible(false);
|
||||
};
|
||||
|
||||
const handleEssentialOnly = () => {
|
||||
updateConsent(CONSENT_CONFIGS.ESSENTIAL_ONLY);
|
||||
setIsVisible(false);
|
||||
};
|
||||
|
||||
const handleCustomSave = () => {
|
||||
const consentChoices = {
|
||||
necessary: 'granted',
|
||||
analytics_storage: customConsent.analytics_storage ? 'granted' : 'denied',
|
||||
ad_storage: customConsent.ad_storage ? 'granted' : 'denied',
|
||||
ad_personalization: customConsent.ad_personalization ? 'granted' : 'denied',
|
||||
ad_user_data: customConsent.ad_user_data ? 'granted' : 'denied'
|
||||
};
|
||||
|
||||
updateConsent(consentChoices);
|
||||
setIsVisible(false);
|
||||
};
|
||||
|
||||
const toggleCustomConsent = (category) => {
|
||||
setCustomConsent(prev => ({
|
||||
...prev,
|
||||
[category]: !prev[category]
|
||||
}));
|
||||
};
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-50 bg-white/95 dark:bg-slate-800/95 backdrop-blur-md border-t border-slate-200 dark:border-slate-700 shadow-2xl">
|
||||
<div className="max-w-7xl mx-auto p-4 sm:p-6">
|
||||
{!showCustomize ? (
|
||||
// Main consent banner
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center gap-4">
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0">
|
||||
<Shield className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-slate-800 dark:text-white mb-1">
|
||||
{bannerData.title}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300 mb-2">
|
||||
{bannerData.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 text-xs">
|
||||
<Link
|
||||
to="/privacy"
|
||||
className="text-blue-600 hover:text-blue-700 dark:text-blue-400 underline"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<span className="text-slate-400">•</span>
|
||||
<Link
|
||||
to="/terms"
|
||||
className="text-blue-600 hover:text-blue-700 dark:text-blue-400 underline"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 lg:flex-shrink-0">
|
||||
<button
|
||||
onClick={handleEssentialOnly}
|
||||
className="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300 dark:hover:text-white border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
Essential Only
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCustomize(true)}
|
||||
className="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300 dark:hover:text-white border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
Customize
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAcceptAll}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
Accept All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Customization panel
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-slate-800 dark:text-white">
|
||||
Customize Cookie Preferences
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowCustomize(false)}
|
||||
className="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
{bannerData.purposes.map(purpose => (
|
||||
<div key={purpose.id} className="flex items-start gap-3">
|
||||
<div className="flex items-center h-5">
|
||||
{purpose.required ? (
|
||||
<div className="w-4 h-4 bg-green-500 rounded border flex items-center justify-center">
|
||||
<Check className="h-3 w-3 text-white" />
|
||||
</div>
|
||||
) : (
|
||||
<input
|
||||
type="checkbox"
|
||||
id={purpose.id}
|
||||
checked={customConsent[purpose.id] || false}
|
||||
onChange={() => toggleCustomConsent(purpose.id)}
|
||||
className="w-4 h-4 text-blue-600 bg-slate-100 border-slate-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-slate-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label
|
||||
htmlFor={purpose.id}
|
||||
className="text-sm font-medium text-slate-800 dark:text-white cursor-pointer"
|
||||
>
|
||||
{purpose.name}
|
||||
{purpose.required && (
|
||||
<span className="ml-1 text-xs text-green-600 dark:text-green-400">
|
||||
(Required)
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-300 mt-1">
|
||||
{purpose.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 justify-end">
|
||||
<button
|
||||
onClick={handleEssentialOnly}
|
||||
className="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300 dark:hover:text-white border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
Essential Only
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCustomSave}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
|
||||
>
|
||||
Save Preferences
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConsentBanner;
|
||||
@@ -1,8 +1,12 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { Home, Hash, FileSpreadsheet, Wand2, GitCompare, Menu, X, LinkIcon, Code2, ChevronDown, Type, Edit3, Table } from 'lucide-react';
|
||||
import { Home, Menu, X, ChevronDown, Terminal, Sparkles } from 'lucide-react';
|
||||
import ThemeToggle from './ThemeToggle';
|
||||
import ToolSidebar from './ToolSidebar';
|
||||
import SEOHead from './SEOHead';
|
||||
import ConsentBanner from './ConsentBanner';
|
||||
import { TOOLS, SITE_CONFIG, getCategoryConfig } from '../config/tools';
|
||||
import { useAnalytics } from '../hooks/useAnalytics';
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const location = useLocation();
|
||||
@@ -10,6 +14,9 @@ const Layout = ({ children }) => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
// Initialize analytics tracking
|
||||
useAnalytics();
|
||||
|
||||
const isActive = (path) => {
|
||||
return location.pathname === path;
|
||||
};
|
||||
@@ -34,30 +41,27 @@ const Layout = ({ children }) => {
|
||||
setIsDropdownOpen(false);
|
||||
}, [location.pathname]);
|
||||
|
||||
const tools = [
|
||||
{ path: '/object-editor', name: 'Object Editor', icon: Edit3, description: 'Visual editor for JSON & PHP objects' },
|
||||
{ path: '/table-editor', name: 'Table Editor', icon: Table, description: 'Import, edit & export tabular data' },
|
||||
{ path: '/url', name: 'URL Tool', icon: LinkIcon, description: 'URL encode/decode' },
|
||||
{ path: '/base64', name: 'Base64 Tool', icon: Hash, description: 'Base64 encode/decode' },
|
||||
{ path: '/csv-json', name: 'CSV/JSON Tool', icon: FileSpreadsheet, description: 'Convert CSV ↔ JSON' },
|
||||
{ path: '/beautifier', name: 'Beautifier Tool', icon: Wand2, description: 'Beautify/minify code' },
|
||||
{ path: '/diff', name: 'Diff Tool', icon: GitCompare, description: 'Compare text differences' },
|
||||
{ path: '/text-length', name: 'Text Length Checker', icon: Type, description: 'Analyze text length & stats' },
|
||||
];
|
||||
|
||||
// Check if we're on a tool page (not homepage)
|
||||
const isToolPage = location.pathname !== '/';
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-indigo-900 flex flex-col">
|
||||
{/* SEO Head Management */}
|
||||
<SEOHead />
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
|
||||
<header className="sticky top-0 z-50 bg-white/80 dark:bg-slate-800/80 backdrop-blur-md shadow-lg border-b border-slate-200/50 dark:border-slate-700/50 flex-shrink-0">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<Link to="/" className="flex items-center space-x-2">
|
||||
<Code2 className="h-8 w-8 text-primary-600" />
|
||||
<span className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
DevTools
|
||||
<Link to="/" className="flex items-center space-x-3 group">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-20 group-hover:opacity-40 transition-opacity"></div>
|
||||
<div className="relative bg-gradient-to-r from-blue-500 to-purple-500 p-2 rounded-lg">
|
||||
<Terminal className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
|
||||
{SITE_CONFIG.title}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
@@ -67,10 +71,10 @@ const Layout = ({ children }) => {
|
||||
<nav className="hidden md:flex items-center space-x-6">
|
||||
<Link
|
||||
to="/"
|
||||
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
className={`flex items-center space-x-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300 ${
|
||||
isActive('/')
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
|
||||
: 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'
|
||||
? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
|
||||
: 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50'
|
||||
}`}
|
||||
>
|
||||
<Home className="h-4 w-4" />
|
||||
@@ -81,38 +85,49 @@ const Layout = ({ children }) => {
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors"
|
||||
className="flex items-center space-x-2 px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300"
|
||||
>
|
||||
<Sparkles className="h-4 w-4" />
|
||||
<span>Tools</span>
|
||||
<ChevronDown className={`h-4 w-4 transition-transform ${
|
||||
<ChevronDown className={`h-4 w-4 transition-transform duration-300 ${
|
||||
isDropdownOpen ? 'rotate-180' : ''
|
||||
}`} />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
|
||||
{tools.map((tool) => {
|
||||
const IconComponent = tool.icon;
|
||||
return (
|
||||
<Link
|
||||
key={tool.path}
|
||||
to={tool.path}
|
||||
onClick={() => setIsDropdownOpen(false)}
|
||||
className={`flex items-center space-x-3 px-4 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ${
|
||||
isActive(tool.path)
|
||||
? 'bg-primary-50 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
|
||||
: 'text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<IconComponent className="h-4 w-4" />
|
||||
<div>
|
||||
<div className="font-medium">{tool.name}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{tool.description}</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<div className="absolute top-full left-0 mt-3 w-80 bg-white/90 dark:bg-slate-800/90 backdrop-blur-md rounded-2xl shadow-2xl border border-slate-200/50 dark:border-slate-700/50 py-3 z-50 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-slate-800/50 dark:to-slate-700/50"></div>
|
||||
<div className="relative">
|
||||
{TOOLS.map((tool) => {
|
||||
const IconComponent = tool.icon;
|
||||
const categoryConfig = getCategoryConfig(tool.category);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tool.path}
|
||||
to={tool.path}
|
||||
onClick={() => setIsDropdownOpen(false)}
|
||||
className={`group flex items-center space-x-4 px-4 py-3 text-sm hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300 ${
|
||||
isActive(tool.path)
|
||||
? 'bg-gradient-to-r from-blue-50 to-purple-50 dark:from-slate-700 dark:to-slate-600 text-blue-700 dark:text-blue-300'
|
||||
: 'text-slate-700 dark:text-slate-300'
|
||||
}`}
|
||||
>
|
||||
<div className={`p-2 rounded-lg bg-gradient-to-br ${categoryConfig.color} shadow-sm group-hover:scale-110 transition-transform duration-300`}>
|
||||
<IconComponent className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{tool.name}</div>
|
||||
<div className="text-xs text-slate-500 dark:text-slate-400">{tool.description}</div>
|
||||
</div>
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<ChevronDown className="h-4 w-4 -rotate-90 text-slate-400" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -124,7 +139,7 @@ const Layout = ({ children }) => {
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="md:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors"
|
||||
className="md:hidden p-2 rounded-xl text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300"
|
||||
>
|
||||
{isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</button>
|
||||
@@ -135,43 +150,48 @@ const Layout = ({ children }) => {
|
||||
|
||||
{/* Mobile Navigation Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="md:hidden bg-white/90 dark:bg-slate-800/90 backdrop-blur-md border-b border-slate-200/50 dark:border-slate-700/50 shadow-lg">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="space-y-2">
|
||||
<Link
|
||||
to="/"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
className={`flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300 ${
|
||||
isActive('/')
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
|
||||
: 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'
|
||||
? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
|
||||
: 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50'
|
||||
}`}
|
||||
>
|
||||
<Home className="h-5 w-5" />
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 pt-2 mt-2">
|
||||
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-1">
|
||||
<div className="border-t border-slate-200/50 dark:border-slate-700/50 pt-4 mt-4">
|
||||
<div className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider px-4 py-2 flex items-center gap-2">
|
||||
<Sparkles className="h-3 w-3" />
|
||||
{isToolPage ? 'Switch Tools' : 'Tools'}
|
||||
</div>
|
||||
{tools.map((tool) => {
|
||||
{TOOLS.map((tool) => {
|
||||
const IconComponent = tool.icon;
|
||||
const categoryConfig = getCategoryConfig(tool.category);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tool.path}
|
||||
to={tool.path}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
className={`flex items-center space-x-4 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300 ${
|
||||
isActive(tool.path)
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
|
||||
: 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'
|
||||
? 'bg-gradient-to-r from-blue-50 to-purple-50 dark:from-slate-700 dark:to-slate-600 text-blue-700 dark:text-blue-300'
|
||||
: 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50'
|
||||
}`}
|
||||
>
|
||||
<IconComponent className="h-5 w-5" />
|
||||
<div>
|
||||
<div className={`p-2 rounded-lg bg-gradient-to-br ${categoryConfig.color} shadow-sm`}>
|
||||
<IconComponent className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{tool.name}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{tool.description}</div>
|
||||
<div className="text-xs text-slate-500 dark:text-slate-400">{tool.description}</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
@@ -199,24 +219,97 @@ const Layout = ({ children }) => {
|
||||
{children}
|
||||
</div>
|
||||
{/* Footer for tool pages - inside scrollable content */}
|
||||
<footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
|
||||
<footer className="bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm border-t border-slate-200/50 dark:border-slate-700/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="text-center text-gray-600 dark:text-gray-400">
|
||||
<p>© {new Date().getFullYear()} Dewe Toolsites - Developer Tools.</p>
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
|
||||
<span className="text-sm font-medium text-slate-600 dark:text-slate-400">
|
||||
© {SITE_CONFIG.year} {SITE_CONFIG.title}
|
||||
</span>
|
||||
<div className="w-2 h-2 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-500 mb-3">
|
||||
Built with ❤️ for developers worldwide
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4 text-xs">
|
||||
<Link
|
||||
to="/privacy"
|
||||
className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<span className="text-slate-300 dark:text-slate-600">•</span>
|
||||
<Link
|
||||
to="/terms"
|
||||
className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{children}
|
||||
</div>
|
||||
{children}
|
||||
{/* Footer for homepage */}
|
||||
<footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="text-center text-gray-600 dark:text-gray-400">
|
||||
<p>© {new Date().getFullYear()} Dewe Toolsites - Developer Tools.</p>
|
||||
<footer className="bg-white/30 dark:bg-slate-800/30 backdrop-blur-sm border-t border-slate-200/30 dark:border-slate-700/30 mt-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-20"></div>
|
||||
<div className="relative bg-gradient-to-r from-blue-500 to-purple-500 p-2 rounded-lg">
|
||||
<Terminal className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-lg font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
|
||||
{SITE_CONFIG.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 mb-3">
|
||||
<div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
|
||||
<span className="text-sm font-medium text-slate-600 dark:text-slate-400">
|
||||
© {SITE_CONFIG.year} {SITE_CONFIG.title}
|
||||
</span>
|
||||
<div className="w-2 h-2 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-500 mb-4">
|
||||
{SITE_CONFIG.description}
|
||||
</p>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex justify-center items-center gap-6 text-xs text-slate-400 dark:text-slate-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span>100% Client-Side</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
|
||||
<span>Privacy First</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-1.5 h-1.5 bg-purple-500 rounded-full"></div>
|
||||
<span>Open Source</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs">
|
||||
<Link
|
||||
to="/privacy"
|
||||
className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<span className="text-slate-300 dark:text-slate-600">•</span>
|
||||
<Link
|
||||
to="/terms"
|
||||
className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -224,6 +317,9 @@ const Layout = ({ children }) => {
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* GDPR Consent Banner */}
|
||||
<ConsentBanner />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
75
src/components/SEOHead.js
Normal file
75
src/components/SEOHead.js
Normal file
@@ -0,0 +1,75 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { generateMetaTags } from '../utils/seo';
|
||||
|
||||
// SEO Head component that manually updates document head
|
||||
// This works without additional dependencies until we add react-helmet-async
|
||||
const SEOHead = () => {
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const { title, meta, link, structuredData } = generateMetaTags(location.pathname);
|
||||
|
||||
// Update document title
|
||||
document.title = title;
|
||||
|
||||
// Remove existing meta tags that we manage
|
||||
const existingMeta = document.querySelectorAll('meta[data-seo="true"]');
|
||||
existingMeta.forEach(tag => tag.remove());
|
||||
|
||||
const existingLinks = document.querySelectorAll('link[data-seo="true"]');
|
||||
existingLinks.forEach(tag => tag.remove());
|
||||
|
||||
const existingStructuredData = document.querySelectorAll('script[data-seo="structured-data"]');
|
||||
existingStructuredData.forEach(tag => tag.remove());
|
||||
|
||||
// Add new meta tags
|
||||
meta.forEach(({ name, property, content }) => {
|
||||
const metaTag = document.createElement('meta');
|
||||
if (name) metaTag.setAttribute('name', name);
|
||||
if (property) metaTag.setAttribute('property', property);
|
||||
metaTag.setAttribute('content', content);
|
||||
metaTag.setAttribute('data-seo', 'true');
|
||||
document.head.appendChild(metaTag);
|
||||
});
|
||||
|
||||
// Add canonical link
|
||||
link.forEach(({ rel, href }) => {
|
||||
const linkTag = document.createElement('link');
|
||||
linkTag.setAttribute('rel', rel);
|
||||
linkTag.setAttribute('href', href);
|
||||
linkTag.setAttribute('data-seo', 'true');
|
||||
document.head.appendChild(linkTag);
|
||||
});
|
||||
|
||||
// Add structured data
|
||||
if (structuredData) {
|
||||
const script = document.createElement('script');
|
||||
script.type = 'application/ld+json';
|
||||
script.setAttribute('data-seo', 'structured-data');
|
||||
script.textContent = JSON.stringify(structuredData);
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
// Add preconnect for performance
|
||||
const preconnectLinks = [
|
||||
'https://www.googletagmanager.com',
|
||||
'https://www.google-analytics.com'
|
||||
];
|
||||
|
||||
preconnectLinks.forEach(href => {
|
||||
if (!document.querySelector(`link[rel="preconnect"][href="${href}"]`)) {
|
||||
const preconnect = document.createElement('link');
|
||||
preconnect.rel = 'preconnect';
|
||||
preconnect.href = href;
|
||||
preconnect.setAttribute('data-seo', 'true');
|
||||
document.head.appendChild(preconnect);
|
||||
}
|
||||
});
|
||||
|
||||
}, [location.pathname]);
|
||||
|
||||
return null; // This component doesn't render anything
|
||||
};
|
||||
|
||||
export default SEOHead;
|
||||
@@ -146,18 +146,28 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
|
||||
} else if (currentValue === null) {
|
||||
current[key] = value === 'null' ? null : value;
|
||||
} else {
|
||||
// For strings and initial empty values, use auto-detection
|
||||
// For strings and initial empty values, use smart detection
|
||||
if (currentValue === '' || currentValue === undefined) {
|
||||
if (value === 'true' || value === 'false') {
|
||||
current[key] = value === 'true';
|
||||
} else if (value === 'null') {
|
||||
current[key] = null;
|
||||
} else if (!isNaN(value) && value !== '' && value.trim() !== '') {
|
||||
current[key] = Number(value);
|
||||
} else {
|
||||
// Check if this is a newly added property (starts with "property" + number)
|
||||
const isNewProperty = typeof key === 'string' && key.match(/^property\d+$/);
|
||||
|
||||
if (isNewProperty) {
|
||||
// New properties added by user are always strings (no auto-detection)
|
||||
current[key] = value;
|
||||
} else {
|
||||
// Existing properties from loaded data - use auto-detection
|
||||
if (value === 'true' || value === 'false') {
|
||||
current[key] = value === 'true';
|
||||
} else if (value === 'null') {
|
||||
current[key] = null;
|
||||
} else if (!isNaN(value) && value !== '' && value.trim() !== '') {
|
||||
current[key] = Number(value);
|
||||
} else {
|
||||
current[key] = value;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Existing non-empty values - preserve as string unless user explicitly changes type
|
||||
current[key] = value;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,97 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { getCategoryConfig } from '../config/tools';
|
||||
|
||||
const ToolCard = ({ icon: Icon, title, description, path, tags, category }) => {
|
||||
const categoryConfig = getCategoryConfig(category);
|
||||
|
||||
// Define explicit hover classes for Tailwind CSS purging
|
||||
const getHoverClasses = (category) => {
|
||||
switch (category) {
|
||||
case 'editor':
|
||||
return {
|
||||
border: 'hover:border-blue-300 dark:hover:border-blue-500',
|
||||
shadow: 'hover:shadow-blue-500/20',
|
||||
titleColor: 'group-hover:text-blue-600 dark:group-hover:text-blue-400',
|
||||
arrowColor: 'group-hover:text-blue-600',
|
||||
badgeColor: 'group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:text-blue-700 dark:group-hover:text-blue-300'
|
||||
};
|
||||
case 'encoder':
|
||||
return {
|
||||
border: 'hover:border-purple-300 dark:hover:border-purple-500',
|
||||
shadow: 'hover:shadow-purple-500/20',
|
||||
titleColor: 'group-hover:text-purple-600 dark:group-hover:text-purple-400',
|
||||
arrowColor: 'group-hover:text-purple-600',
|
||||
badgeColor: 'group-hover:bg-purple-100 dark:group-hover:bg-purple-900/30 group-hover:text-purple-700 dark:group-hover:text-purple-300'
|
||||
};
|
||||
case 'formatter':
|
||||
return {
|
||||
border: 'hover:border-green-300 dark:hover:border-green-500',
|
||||
shadow: 'hover:shadow-green-500/20',
|
||||
titleColor: 'group-hover:text-green-600 dark:group-hover:text-green-400',
|
||||
arrowColor: 'group-hover:text-green-600',
|
||||
badgeColor: 'group-hover:bg-green-100 dark:group-hover:bg-green-900/30 group-hover:text-green-700 dark:group-hover:text-green-300'
|
||||
};
|
||||
case 'analyzer':
|
||||
return {
|
||||
border: 'hover:border-orange-300 dark:hover:border-orange-500',
|
||||
shadow: 'hover:shadow-orange-500/20',
|
||||
titleColor: 'group-hover:text-orange-600 dark:group-hover:text-orange-400',
|
||||
arrowColor: 'group-hover:text-orange-600',
|
||||
badgeColor: 'group-hover:bg-orange-100 dark:group-hover:bg-orange-900/30 group-hover:text-orange-700 dark:group-hover:text-orange-300'
|
||||
};
|
||||
default:
|
||||
return {
|
||||
border: 'hover:border-slate-300 dark:hover:border-slate-500',
|
||||
shadow: 'hover:shadow-slate-500/20',
|
||||
titleColor: 'group-hover:text-slate-600 dark:group-hover:text-slate-400',
|
||||
arrowColor: 'group-hover:text-slate-600',
|
||||
badgeColor: 'group-hover:bg-slate-100 dark:group-hover:bg-slate-700 group-hover:text-slate-700 dark:group-hover:text-slate-300'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const hoverClasses = getHoverClasses(category);
|
||||
|
||||
const ToolCard = ({ icon: Icon, title, description, path, tags }) => {
|
||||
return (
|
||||
<Link to={path} className="block">
|
||||
<div className="tool-card group cursor-pointer">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">
|
||||
<Icon className="h-8 w-8 text-primary-600" />
|
||||
<Link to={path} className="block group">
|
||||
<div className={`relative overflow-hidden rounded-2xl bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border border-slate-200 dark:border-slate-700 ${hoverClasses.border} transition-all duration-300 hover:shadow-2xl ${hoverClasses.shadow} hover:-translate-y-1`}>
|
||||
{/* Gradient overlay on hover */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${categoryConfig.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300`}></div>
|
||||
|
||||
<div className="relative p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className={`flex-shrink-0 p-3 rounded-xl bg-gradient-to-br ${categoryConfig.color} shadow-lg group-hover:scale-110 transition-transform duration-300`}>
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
<ArrowRight className={`h-5 w-5 text-slate-400 ${hoverClasses.arrowColor} group-hover:translate-x-1 transition-all duration-300`} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-primary-600 transition-colors">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 mt-1">
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className={`text-xl font-bold text-slate-800 dark:text-white ${hoverClasses.titleColor} transition-colors`}>
|
||||
{title}
|
||||
</h3>
|
||||
<span className={`px-2 py-1 text-xs font-medium bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-full ${hoverClasses.badgeColor} transition-colors`}>
|
||||
{categoryConfig.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-slate-600 dark:text-slate-300 leading-relaxed group-hover:text-slate-700 dark:group-hover:text-slate-200 transition-colors">
|
||||
{description}
|
||||
</p>
|
||||
{tags && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
|
||||
{tags && tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
{tags.map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full"
|
||||
className="px-3 py-1 text-xs font-medium bg-slate-50 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400 rounded-full border border-slate-200 dark:border-slate-600 group-hover:border-slate-300 dark:group-hover:border-slate-500 transition-colors"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -30,9 +99,6 @@ const ToolCard = ({ icon: Icon, title, description, path, tags }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<ArrowRight className="h-5 w-5 text-gray-400 group-hover:text-primary-600 transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -1,24 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { Search, LinkIcon, Hash, Table, Wand2, GitCompare, Home, ChevronLeft, ChevronRight, Type, Edit3 } from 'lucide-react';
|
||||
import { Search, ChevronLeft, ChevronRight, Sparkles } from 'lucide-react';
|
||||
import { NAVIGATION_TOOLS, SITE_CONFIG } from '../config/tools';
|
||||
|
||||
const ToolSidebar = () => {
|
||||
const location = useLocation();
|
||||
const [isCollapsed, setIsCollapsed] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const tools = [
|
||||
{ path: '/', name: 'Home', icon: Home, description: 'Back to homepage' },
|
||||
{ path: '/object-editor', name: 'Object Editor', icon: Edit3, description: 'Visual editor for JSON & PHP objects' },
|
||||
{ path: '/table-editor', name: 'Table Editor', icon: Table, description: 'Import, edit & export tabular data' },
|
||||
{ path: '/url', name: 'URL Tool', icon: LinkIcon, description: 'URL encode/decode' },
|
||||
{ path: '/base64', name: 'Base64 Tool', icon: Hash, description: 'Base64 encode/decode' },
|
||||
{ path: '/beautifier', name: 'Beautifier Tool', icon: Wand2, description: 'Beautify/minify code' },
|
||||
{ path: '/diff', name: 'Diff Tool', icon: GitCompare, description: 'Compare text differences' },
|
||||
{ path: '/text-length', name: 'Text Length Checker', icon: Type, description: 'Analyze text length & stats' },
|
||||
];
|
||||
|
||||
const filteredTools = tools.filter(tool =>
|
||||
const filteredTools = NAVIGATION_TOOLS.filter(tool =>
|
||||
tool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
tool.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
@@ -26,69 +16,220 @@ const ToolSidebar = () => {
|
||||
const isActive = (path) => location.pathname === path;
|
||||
|
||||
return (
|
||||
<div className={`bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-all duration-300 sticky top-16 ${
|
||||
<div className={`bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-r border-slate-200/50 dark:border-slate-700/50 transition-all duration-300 sticky top-16 ${
|
||||
isCollapsed ? 'w-16' : 'w-64'
|
||||
}`} style={{ height: 'calc(100vh - 4rem)' }}>
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Sidebar Header */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="p-4 border-b border-slate-200/50 dark:border-slate-700/50">
|
||||
<div className="flex items-center justify-between">
|
||||
{!isCollapsed && (
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Tools
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4 text-blue-500" />
|
||||
<h2 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
Tools
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
className="p-2 rounded-xl hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300 group"
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<ChevronRight className="h-4 w-4 text-gray-500" />
|
||||
<ChevronRight className="h-4 w-4 text-slate-500 group-hover:text-blue-500 transition-colors" />
|
||||
) : (
|
||||
<ChevronLeft className="h-4 w-4 text-gray-500" />
|
||||
<ChevronLeft className="h-4 w-4 text-slate-500 group-hover:text-blue-500 transition-colors" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search - only show when not collapsed */}
|
||||
{!isCollapsed && (
|
||||
<div className="relative mt-3">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tools..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
/>
|
||||
<div className="relative mt-4">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl blur opacity-50"></div>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tools..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2.5 text-sm border border-slate-200 dark:border-slate-600 rounded-xl bg-white/80 dark:bg-slate-700/80 backdrop-blur-sm text-slate-900 dark:text-slate-100 placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tools List */}
|
||||
<div className="flex-1 overflow-y-auto py-2">
|
||||
<nav className="space-y-1 px-2">
|
||||
<div className="flex-1 overflow-y-auto py-3">
|
||||
<nav className="space-y-2 px-3">
|
||||
{filteredTools.map((tool) => {
|
||||
const IconComponent = tool.icon;
|
||||
const isActiveItem = isActive(tool.path);
|
||||
const isHome = tool.path === '/';
|
||||
|
||||
// Get category-specific colors for active states
|
||||
const getActiveClasses = (category, isHome) => {
|
||||
if (isHome) {
|
||||
return {
|
||||
collapsed: '', // No background for folded active items
|
||||
expanded: 'bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-600',
|
||||
titleColor: 'text-slate-700 dark:text-slate-300',
|
||||
iconBg: 'bg-gradient-to-br from-slate-500 to-slate-600' // Active icon has colored background
|
||||
};
|
||||
}
|
||||
|
||||
switch (category) {
|
||||
case 'editor':
|
||||
return {
|
||||
collapsed: '', // No background for folded active items
|
||||
expanded: 'bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30',
|
||||
titleColor: 'text-blue-700 dark:text-blue-300',
|
||||
iconBg: 'bg-gradient-to-br from-blue-500 to-cyan-500'
|
||||
};
|
||||
case 'encoder':
|
||||
return {
|
||||
collapsed: '', // No background for folded active items
|
||||
expanded: 'bg-gradient-to-r from-purple-50 to-purple-100 dark:from-purple-900/30 dark:to-purple-800/30',
|
||||
titleColor: 'text-purple-700 dark:text-purple-300',
|
||||
iconBg: 'bg-gradient-to-br from-purple-500 to-pink-500'
|
||||
};
|
||||
case 'formatter':
|
||||
return {
|
||||
collapsed: '', // No background for folded active items
|
||||
expanded: 'bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/30 dark:to-green-800/30',
|
||||
titleColor: 'text-green-700 dark:text-green-300',
|
||||
iconBg: 'bg-gradient-to-br from-green-500 to-emerald-500'
|
||||
};
|
||||
case 'analyzer':
|
||||
return {
|
||||
collapsed: '', // No background for folded active items
|
||||
expanded: 'bg-gradient-to-r from-orange-50 to-orange-100 dark:from-orange-900/30 dark:to-orange-800/30',
|
||||
titleColor: 'text-orange-700 dark:text-orange-300',
|
||||
iconBg: 'bg-gradient-to-br from-orange-500 to-red-500'
|
||||
};
|
||||
default:
|
||||
return {
|
||||
collapsed: '', // No background for folded active items
|
||||
expanded: 'bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-600',
|
||||
titleColor: 'text-slate-700 dark:text-slate-300',
|
||||
iconBg: 'bg-gradient-to-br from-slate-500 to-slate-600'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getInactiveClasses = (category, isHome) => {
|
||||
if (isHome) {
|
||||
return {
|
||||
collapsed: '', // No background for folded inactive items
|
||||
expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
|
||||
titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-slate-700 dark:group-hover:text-slate-300',
|
||||
iconBorder: 'border-2 border-slate-300 dark:border-slate-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-slate-500 group-hover:to-slate-600', // Hover: colored background
|
||||
iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white' // Hover: white icon
|
||||
};
|
||||
}
|
||||
|
||||
switch (category) {
|
||||
case 'editor':
|
||||
return {
|
||||
collapsed: '', // No background for folded inactive items
|
||||
expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
|
||||
titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-blue-600 dark:group-hover:text-blue-400',
|
||||
iconBorder: 'border-2 border-blue-300 dark:border-blue-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-blue-500 group-hover:to-cyan-500',
|
||||
iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
|
||||
};
|
||||
case 'encoder':
|
||||
return {
|
||||
collapsed: '', // No background for folded inactive items
|
||||
expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
|
||||
titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-purple-600 dark:group-hover:text-purple-400',
|
||||
iconBorder: 'border-2 border-purple-300 dark:border-purple-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-purple-500 group-hover:to-pink-500',
|
||||
iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
|
||||
};
|
||||
case 'formatter':
|
||||
return {
|
||||
collapsed: '', // No background for folded inactive items
|
||||
expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
|
||||
titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-green-600 dark:group-hover:text-green-400',
|
||||
iconBorder: 'border-2 border-green-300 dark:border-green-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-green-500 group-hover:to-emerald-500',
|
||||
iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
|
||||
};
|
||||
case 'analyzer':
|
||||
return {
|
||||
collapsed: '', // No background for folded inactive items
|
||||
expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
|
||||
titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-orange-600 dark:group-hover:text-orange-400',
|
||||
iconBorder: 'border-2 border-orange-300 dark:border-orange-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-orange-500 group-hover:to-red-500',
|
||||
iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
|
||||
};
|
||||
default:
|
||||
return {
|
||||
collapsed: '', // No background for folded inactive items
|
||||
expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
|
||||
titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-slate-700 dark:group-hover:text-slate-300',
|
||||
iconBorder: 'border-2 border-slate-300 dark:border-slate-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-slate-500 group-hover:to-slate-600',
|
||||
iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const activeClasses = getActiveClasses(tool.category, isHome);
|
||||
const inactiveClasses = getInactiveClasses(tool.category, isHome);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tool.path}
|
||||
to={tool.path}
|
||||
className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
isActive(tool.path)
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
|
||||
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700'
|
||||
className={`group flex items-center text-sm font-medium rounded-xl transition-all duration-300 ${
|
||||
isActiveItem
|
||||
? isCollapsed
|
||||
? activeClasses.collapsed + ' justify-center py-3' // Center for folded
|
||||
: activeClasses.expanded + ' shadow-lg px-3 py-3'
|
||||
: isCollapsed
|
||||
? inactiveClasses.collapsed + ' justify-center py-3' // Center for folded
|
||||
: inactiveClasses.expanded + ' px-3 py-3'
|
||||
}`}
|
||||
title={isCollapsed ? tool.name : ''}
|
||||
>
|
||||
<IconComponent className={`h-5 w-5 ${isCollapsed ? '' : 'mr-3'} flex-shrink-0`} />
|
||||
{!isCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">{tool.name}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{tool.description}
|
||||
</div>
|
||||
{isCollapsed ? (
|
||||
// Folded sidebar - clean icon squares only, centered
|
||||
<div className={`rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-300 ${
|
||||
isActiveItem
|
||||
? activeClasses.iconBg + ' p-3' // Active: bigger padding (no border)
|
||||
: inactiveClasses.iconBorder + ' p-2' // Inactive: normal padding (has border)
|
||||
}`}>
|
||||
<IconComponent className={`${
|
||||
isActiveItem
|
||||
? 'h-5 w-5 text-white' // Active: bigger icon, white
|
||||
: 'h-4 w-4 ' + inactiveClasses.iconColor // Inactive: normal size, grayscale/hover
|
||||
}`} />
|
||||
</div>
|
||||
) : (
|
||||
// Expanded sidebar
|
||||
<>
|
||||
<div className={`p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-300 mr-3 flex-shrink-0 ${
|
||||
isActiveItem
|
||||
? activeClasses.iconBg // Active: colored background
|
||||
: inactiveClasses.iconBorder // Inactive: transparent with colored border
|
||||
}`}>
|
||||
<IconComponent className={`h-4 w-4 ${
|
||||
isActiveItem
|
||||
? 'text-white' // Active: white icon
|
||||
: inactiveClasses.iconColor // Inactive: grayscale icon
|
||||
}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`font-medium truncate ${
|
||||
isActiveItem ? activeClasses.titleColor : inactiveClasses.titleColor
|
||||
}`}>
|
||||
{tool.name}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||
{tool.description}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
@@ -98,9 +239,18 @@ const ToolSidebar = () => {
|
||||
|
||||
{/* Footer */}
|
||||
{!isCollapsed && (
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
Quick access to all tools
|
||||
<div className="p-4 border-t border-slate-200/50 dark:border-slate-700/50">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<div className="w-1.5 h-1.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-xs font-medium text-slate-500 dark:text-slate-400">
|
||||
Quick Access
|
||||
</span>
|
||||
<div className="w-1.5 h-1.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">
|
||||
{SITE_CONFIG.totalTools} tools available
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user