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

const tools = [
  { 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' },
fisherdaddy's avatar
fisherdaddy committed
10 11
  { id: 'textDiff', icon: '/assets/icon/diff.png', path: '/text-diff' },

fisherdaddy's avatar
fisherdaddy committed
12 13 14 15 16 17 18 19
];

const DevTools = () => {
  const { t } = useTranslation();

  return (
    <>
      <SEO
fisherdaddy's avatar
fisherdaddy committed
20 21
        title={t('dev-tools.title')}
        description={t('dev-tools.description')}
fisherdaddy's avatar
fisherdaddy committed
22
      />
23 24 25
      <main className="container mx-auto px-4 pt-16 pb-8 min-h-screen">
        <section className="mt-8 w-full">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4 w-full">
fisherdaddy's avatar
fisherdaddy committed
26
            {tools.map(tool => (
27 28 29 30 31
              <Link 
                to={tool.path} 
                key={tool.id} 
                className="flex items-center p-4 bg-white/10 backdrop-blur-md rounded-xl border border-white/10 transition-all hover:translate-y-[-2px] hover:shadow-lg hover:bg-white/15"
              >
fisherdaddy's avatar
fisherdaddy committed
32 33 34
                <img 
                  src={tool.icon} 
                  alt={`${t(`tools.${tool.id}.title`)} icon`} 
35
                  className="w-12 h-12 object-contain mr-4" 
fisherdaddy's avatar
fisherdaddy committed
36 37
                  loading="lazy" 
                />
38 39 40
                <div className="flex-1 min-w-0">
                  <h3 className="text-lg font-semibold mb-1 text-gray-800">{t(`tools.${tool.id}.title`)}</h3>
                  <p className="text-sm text-gray-600 line-clamp-2">{t(`tools.${tool.id}.description`)}</p>
fisherdaddy's avatar
fisherdaddy committed
41 42 43 44 45 46 47 48 49 50 51
                </div>
              </Link>
            ))}
          </div>
        </section>
      </main>
    </>
  );
};

export default DevTools;