Home.jsx 1.97 KB
Newer Older
fisherdaddy's avatar
fisherdaddy committed
1 2 3
import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from '../js/i18n';
fisherdaddy's avatar
fisherdaddy committed
4
import SEO from '../components/SEO';
fisherdaddy's avatar
fisherdaddy committed
5 6

const tools = [
fisherdaddy's avatar
fisherdaddy committed
7 8 9 10 11 12 13 14 15
  { id: 'handwrite', icon: '/assets/icon/handwrite.png', path: '/handwriting' },
  { id: 'quotecard', icon: '/assets/icon/quotecard.png', path: '/quote-card' },
  { id: 'text2image', icon: '/assets/icon/text2image.png', path: '/text2image' },
  { 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: 'openAITimeline', icon: '/assets/icon/openai_small.svg', path: '/openai-timeline' },
  { id: 'modelPrice', icon: '/assets/icon/openai_small.svg', path: '/llm-model-price' },
  { id: 'fisherai', icon: '/assets/icon/fisherai.png', path: 'https://chromewebstore.google.com/detail/fisherai-your-best-summar/ipfiijaobcenaibdpaacbbpbjefgekbj', external: true } // 新增外部链接
fisherdaddy's avatar
fisherdaddy committed
16 17
];

fisherdaddy's avatar
fisherdaddy committed
18
const Home = () => {
fisherdaddy's avatar
fisherdaddy committed
19
  const { t } = useTranslation();
fisherdaddy's avatar
fisherdaddy committed
20

fisherdaddy's avatar
fisherdaddy committed
21
  return (
fisherdaddy's avatar
fisherdaddy committed
22 23 24 25 26 27 28 29 30 31
    <>
      <SEO
        title={t('title')}
        description={t('slogan')}
      />
      <main>
        <section className="tools-section">
          <div className="tools-grid">
            {tools.map(tool => (
              <Link to={tool.path} key={tool.id} className="tool-card">
fisherdaddy's avatar
fisherdaddy committed
32 33 34 35 36 37 38 39 40 41
                <img 
                  src={tool.icon} 
                  alt={`${t(`tools.${tool.id}.title`)} icon`} 
                  className="tool-icon" 
                  loading="lazy" 
                />
                <div className="tool-content">
                  <h3 className="tool-title">{t(`tools.${tool.id}.title`)}</h3>
                  <p className="tool-description">{t(`tools.${tool.id}.description`)}</p>
                </div>
fisherdaddy's avatar
fisherdaddy committed
42 43 44 45 46 47
              </Link>
            ))}
          </div>
        </section>
      </main>
    </>
fisherdaddy's avatar
fisherdaddy committed
48
  );
fisherdaddy's avatar
fisherdaddy committed
49
};
fisherdaddy's avatar
fisherdaddy committed
50 51

export default Home;