'use client';
import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { prepareDataForVisualization } from '../lib/utils';
// Dynamically import the dashboard component with SSR disabled
// This is important because recharts needs to be rendered on the client side
const LLMComparisonDashboard = dynamic(
() => import('../components/LLMComparisonDashboard'),
{ ssr: false }
);
export default function Home() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
setLoading(true);
// Fetch the data from the JSON file in the public directory
const response = await fetch('/leaderboard_data.json');
if (!response.ok) {
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
}
const jsonData = await response.json();
// Process the data for visualization
const processedData = prepareDataForVisualization(jsonData);
setData(processedData);
setLoading(false);
} catch (err) {
console.error('Error loading data:', err);
setError(err.message || 'Failed to load data');
setLoading(false);
}
}
fetchData();
}, []);
if (loading) {
return (