import React, { useState, useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { useTranslation } from '../js/i18n'; import SEO from '../components/SEO'; const tools = [ { id: 'handwrite', icon: '/assets/icon/handwrite.png', path: '/handwriting' }, { id: 'quoteCard', icon: '/assets/icon/quotecard.png', path: '/quote-card' }, { id: 'markdown2image', icon: '/assets/icon/markdown2image.png', path: '/markdown-to-image' }, { id: 'wechatFormatter', icon: '/assets/icon/editor.png', path: '/wechat-formatter' }, { id: 'imageAnnotator', icon: '/assets/icon/image-annotator.png', path: '/image-annotator' }, { id: 'subtitleGenerator', icon: '/assets/icon/subtitle2image.png', path: '/subtitle-to-image' }, { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' }, { id: 'imageWatermark', icon: '/assets/icon/image-watermark.png', path: '/image-watermark' }, { id: 'imageBackgroundRemover', icon: '/assets/icon/image-background-remover.png', path: '/background-remover' }, { id: 'textBehindImage', icon: '/assets/icon/text-behind-image.png', path: '/text-behind-image' }, { id: 'latex2image', icon: '/assets/icon/latex2image.png', path: '/latex-to-image' }, { id: 'jsonFormatter', icon: '/assets/icon/json-format.png', path: '/json-formatter' }, { id: 'urlEncodeDecode', icon: '/assets/icon/url-endecode.png', path: '/url-encode-and-decode' }, { id: 'imageBase64Converter', icon: '/assets/icon/image-base64.png', path: '/image-base64' }, { id: 'textDiff', icon: '/assets/icon/diff.png', path: '/text-diff' }, { id: 'openAITimeline', icon: '/assets/icon/openai_small.svg', path: '/openai-timeline' }, { id: 'anthropicTimeline', icon: '/assets/icon/anthropic_small.svg', path: '/anthropic-timeline' }, { id: 'deepSeekTimeline', icon: '/assets/icon/deepseek_small.jpg', path: '/deepseek-timeline' }, { id: 'modelPrice', icon: '/assets/icon/model-price.svg', path: '/llm-model-price' }, { id: 'drugsList', icon: '/assets/icon/drugs.svg', path: '/drugs-list' }, { id: 'fisherai', icon: '/assets/icon/fisherai.png', path: 'https://chromewebstore.google.com/detail/fisherai-your-best-summar/ipfiijaobcenaibdpaacbbpbjefgekbj', external: true } ]; const Home = () => { const { t } = useTranslation(); const [loading, setLoading] = useState(''); const navigate = useNavigate(); useEffect(() => { const handleClearLoading = () => { setLoading(''); }; window.addEventListener('clearLoadingState', handleClearLoading); return () => { window.removeEventListener('clearLoadingState', handleClearLoading); }; }, []); const handleNavigate = (tool) => { if (tool.external) { window.open(tool.path, '_blank', 'noopener,noreferrer'); return; } setLoading(tool.id); window.scrollTo(0, 0); navigate(tool.path); }; const renderToolLink = (tool) => { const content = (
{loading === tool.id && (
)} {`${t(`tools.${tool.id}.title`)}

{t(`tools.${tool.id}.title`)}

{t(`tools.${tool.id}.description`)}

); return tool.external ? ( handleNavigate(tool)} className="block cursor-pointer" > {content} ) : (
handleNavigate(tool)} className="block cursor-pointer"> {content}
); }; return ( <>
{/* Hero Section */}

AI Toolbox

{t('slogan')}

{/* Tools Grid */}
{tools.map(tool => ( {renderToolLink(tool)} ))}
{/* Footer Navigation */}
GitHub {t('navigation.about')}
); }; export default Home;