src/app/page.tsx

import fs from 'fs';
import path from 'path';

type DataItem = {
  title: string;
  description: string;
  data: any[];
};

type Data = {
  title: string;
  description: string;
  data: DataItem[];
};

export default async function Home() {
  // Read the JSON file
  const jsonDirectory = path.join(process.cwd(), 'content');
  const fileContents = await fs.readFileSync(jsonDirectory + '/data.json', 'utf8');
  const data: Data = JSON.parse(fileContents);

  return (
    <main className="container mx-auto py-8 text-gray-900 dark:text-white">
      <h1 className="text-4xl font-bold mb-4">{data.title}</h1>
      <p className="text-xl mb-8">{data.description}</p>

      <table className="table-auto border-collapse w-full">
        <thead>
          <tr>
            <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left">Title</th>
            <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left">Description</th>
          </tr>
        </thead>
        <tbody>
          {data.data.map((item: DataItem, index: number) => (
            <tr key={index} className="border-t border-gray-200 dark:border-gray-700">
              <td className="px-4 py-2">{item.title}</td>
              <td className="px-4 py-2">{item.description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </main>
  );
}