AnthropicTimeline.jsx 1.37 KB
Newer Older
1 2 3 4 5
import React from 'react';
import '../styles/Timeline.css';  // 复用已有的Timeline样式
import events from '../data/anthropic-releases.json';
import SEO from '../components/SEO';
import { useTranslation } from '../js/i18n';
fisherdaddy's avatar
fisherdaddy committed
6
import { useScrollToTop } from '../hooks/useScrollToTop';
7 8
import { usePageLoading } from '../hooks/usePageLoading';
import LoadingOverlay from './LoadingOverlay';
9 10 11

const AnthropicTimeline = () => {
  const { t } = useTranslation();
fisherdaddy's avatar
fisherdaddy committed
12
  useScrollToTop();
13
  const isLoading = usePageLoading();
14 15 16 17 18 19 20

  return (
    <>
      <SEO
        title={t('tools.anthropicTimeline.title')}
        description={t('tools.anthropicTimeline.description')}
      />
21 22
      {isLoading && <LoadingOverlay />}
      <div className="timeline-container">
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
        <h1 className="timeline-title">{t('tools.anthropicTimeline.title')}</h1>
        <ul className="timeline">
          {events.map((item, index) => (
            <li className="event" key={index}>
              <div className="event-content">
                <div className="event-date">{item.date}</div>
                <div className="event-title">{item.title}</div>
                <div className="event-feature">{item.feature}</div>
                <div className="event-description">{item.description}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};

41
export default AnthropicTimeline;