blogbaster2.2/src/pages/log.tsx

import React, { useState, useEffect } from 'react';

type LogData = {
  fileName: string;
  accessCount: number;
};

const LogTable: React.FC = () => {
  const [logData, setLogData] = useState<LogData[]>([]);

  useEffect(() => {
    fetch('/api/log') // Обращаемся к REST API
      .then((response) => response.json())
      .then((data: string[]) => {
        const parsedData: LogData[] = data.map((item: string) => {
          const [fileName, accessCountStr] = item.split(",");
          const accessCount: number = parseInt(accessCountStr);
          return { fileName, accessCount };
        });
        setLogData(parsedData);
      });
  }, []);

  return (
    <div className="m-3 card lg:card-side bg-base-100 shadow-xl">
      <div className="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row ">
        <div className="mb-3 object-cover rounded-t-lg md:w-auto md:min-w-64 md:max-w-64 md:rounded-s-lg md:m-3">
          <div>
            <h2>Статистика доступа к mp3 файлам</h2>
            <div className="container mx-auto p-6">
              <table className="min-w-full bg-white border border-gray-300">
                <thead>
                  <tr>
                    <th className="py-2 px-4 border-b">№</th>
                    <th className="py-2 px-4 border-b">Имя файла</th>
                    <th className="py-2 px-4 border-b">Количество доступов</th>
                  </tr>
                </thead>
                <tbody>
                  {logData.map((item, index) => (
                    <tr key={index}>
                      <td className="py-2 px-4 border-b">{index + 1}</td>
                      <td className="py-2 px-4 border-b">{item.fileName}</td>
                      <td className="py-2 px-4 border-b">{item.accessCount}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LogTable;