PricingCharts.jsx

import React, { useState } from 'react';
import { useScrollToTop } from '../hooks/useScrollToTop';
import PricingChart from '../components/PricingChart';
import OpenaiPricing from '../data/openai-pricing.json';
import LLMPricing from '../data/llm-pricing.json';
import VisionPricing from '../data/vision-model-pricing.json';
import ModelRanking from '../data/model-ranking.json';
import ModelRankingMath from '../data/model-ranking-math.json';
import ModelRankingCode from '../data/model-ranking-code.json';
import ModelRankingWeb from '../data/model-ranking-web.json';
import ModelRankingWriting from '../data/model-ranking-writing.json';
import ModelRankingVision from '../data/model-ranking-vision.json';
import SEO from '../components/SEO';
import { usePageLoading } from '../hooks/usePageLoading';
import LoadingOverlay from './LoadingOverlay';

const TabRankingCharts = () => {
  const [activeTab, setActiveTab] = useState('general');

  const tabs = [
    { id: 'general', name: '综合能力', data: ModelRanking },
    { id: 'math', name: '数学能力', data: ModelRankingMath },
    { id: 'code', name: '代码能力', data: ModelRankingCode },
    { id: 'web', name: 'Web 开发能力', data: ModelRankingWeb },
    { id: 'writing', name: '写作能力', data: ModelRankingWriting },
    { id: 'image', name: '视觉能力', data: ModelRankingVision },
  ];

  return (
    <div className="tab-ranking-charts">
      <div className="tab-buttons">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.name}
          </button>
        ))}
      </div>
      <div className="tab-content">
        {tabs.map((tab) => (
          <div
            key={tab.id}
            className={`tab-pane ${activeTab === tab.id ? 'active' : ''}`}
            style={{ display: activeTab === tab.id ? 'block' : 'none' }}
          >
            <PricingChart data={tab.data} showPricing={false} />
          </div>
        ))}
      </div>
    </div>
  );
};

const PricingCharts = () => {
  useScrollToTop();
  const isLoading = usePageLoading();
  const lastUpdateTime = '2025-02-06 18:00';

  return (
    <>
      <SEO
        title="AI Model Pricing & Ranking Comparison"
        description="Compare prices and performance rankings of different AI models"
      />
      {isLoading && <LoadingOverlay />}
      <div className="pricing-charts-container">
        <div className="update-time">
          Last Updated: {lastUpdateTime}
        </div>
        <PricingChart data={OpenaiPricing} />
        <PricingChart data={LLMPricing} />
        <PricingChart data={VisionPricing} />
        <TabRankingCharts />
      </div>
    </>
  );
};

export default PricingCharts;