Add Text Length Checker tool with comprehensive text analysis features

- Add new TextLengthTool.js with real-time text statistics - Features: character/word/line/sentence/paragraph counting, reading time estimation - Add Text Length Checker to navigation (ToolSidebar, Layout, App routing) - Add Text Length Checker card to homepage - Fix button styling with flex alignment for better UX - Route: /text-length with Type icon from lucide-react
2025-09-21 07:09:33 +07:00
parent 6f5bdf5f0d
commit 82d14622ac
7 changed files with 571 additions and 117 deletions
--- a/src/components/ToolSidebar.js
+++ b/src/components/ToolSidebar.js
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Search, FileText, Database, LinkIcon, Hash, FileSpreadsheet, Wand2, GitCompare, Home, ChevronLeft, ChevronRight, Type } from 'lucide-react';
+
+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: '/json', name: 'JSON Tool', icon: FileText, description: 'Format & validate JSON' },
+    { path: '/serialize', name: 'Serialize Tool', icon: Database, description: 'PHP serialize/unserialize' },
+    { 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' },
+  ];
+
+  const filteredTools = tools.filter(tool =>
+    tool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    tool.description.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  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 ${
+      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="flex items-center justify-between">
+            {!isCollapsed && (
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Tools
+              </h2>
+            )}
+            <button
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            >
+              {isCollapsed ? (
+                <ChevronRight className="h-4 w-4 text-gray-500" />
+              ) : (
+                <ChevronLeft className="h-4 w-4 text-gray-500" />
+              )}
+            </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>
+          )}
+        </div>
+
+        {/* Tools List */}
+        <div className="flex-1 overflow-y-auto py-2">
+          <nav className="space-y-1 px-2">
+            {filteredTools.map((tool) => {
+              const IconComponent = tool.icon;
+              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'
+                  }`}
+                  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>
+                    </div>
+                  )}
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+
+        {/* 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>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ToolSidebar;