Untitled

import React from "react";

// Dummy JSON data with varying columns
const logsData = [
  {
    id: 1,
    name: "John Doe",
    email: "john.doe@example.com",
    phone: "+1-202-555-0176",
    address: "123 Elm Street",
    city: "Springfield",
    state: "IL",
    registrationDate: "2024-01-15T08:45:00Z",
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "jane.smith@example.com",
    phone: "+1-202-555-0145",
    address: "456 Maple Avenue",
    city: "Metropolis",
    state: "NY",
    registrationDate: "2024-02-22T09:30:00Z",
  },
  {
    id: 3,
    name: "Alice Johnson",
    email: "alice.johnson@example.com",
    phone: "+1-202-555-0192",
    address: "789 Oak Lane",
    city: "Smallville",
    state: "KS",
    registrationDate: "2024-03-10T10:15:00Z",
  },
  {
    id: 4,
    name: "Bob Brown",
    email: "bob.brown@example.com",
    phone: "+1-202-555-0187",
    address: "101 Pine Road",
    city: "Gotham",
    state: "NJ",
    registrationDate: "2024-04-05T11:00:00Z",
  },
  {
    id: 5,
    name: "Carol White",
    email: "carol.white@example.com",
    phone: "+1-202-555-0123",
    address: "202 Birch Street",
    city: "Star City",
    state: "CA",
    registrationDate: "2024-05-20T12:45:00Z",
  },
  {
    id: 6,
    name: "David Lee",
    email: "david.lee@example.com",
    phone: "+1-202-555-0164",
    address: "303 Cedar Boulevard",
    city: "Central City",
    state: "TX",
    registrationDate: "2024-06-18T13:30:00Z",
  },
  {
    id: 7,
    name: "Emily Davis",
    email: "emily.davis@example.com",
    phone: "+1-202-555-0138",
    address: "404 Walnut Street",
    city: "Fictional City",
    state: "FL",
    registrationDate: "2024-07-25T14:15:00Z",
  },
  {
    id: 8,
    name: "Frank Miller",
    email: "frank.miller@example.com",
    phone: "+1-202-555-0159",
    address: "505 Cherry Lane",
    city: "Dreamtown",
    state: "WA",
    registrationDate: "2024-08-30T15:00:00Z",
  },
];
// Function to format the date
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleString();
};

// Component to render the dynamic table
const Logs = () => {
  // Get the unique keys from the first object of logsData to use as table headers
  const headers = Object.keys(logsData[0] || {});

  return (
    <div className="max-w-4xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">User Activity Logs</h1>
      <div className="bg-white shadow-md rounded-md overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-blue-700">
            <tr>
              {headers.map((header) => (
                <th
                  key={header}
                  className="px-6 py-3 text-left text-xs font-medium text-gray-50 uppercase tracking-wider"
                >
                  {header.charAt(0).toUpperCase() + header.slice(1)}
                </th>
              ))}
              <th
                  
                  className="px-6 py-3 text-left text-xs font-medium text-gray-50 uppercase tracking-wider"
                >
                  Actions
                </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 ">
            {logsData.map((log) => (
              <>
                <tr key={log.id} className="hover:bg-gray-50">
                  {headers.map((header) => (
                    <td
                      key={header}
                      className="px-6 py-4 whitespace-nowrap font-sans text-sm text-gray-500 "
                    >
                      {header === "timestamp"
                        ? formatDate(log[header])
                        : log[header]}
                    </td>
                  ))}
                  <td className="px-6 py-4 whitespace-nowrap font-sans text-sm text-gray-500 ">
                    <button>edit</button>
                    <button>delete</button>
                  </td>
                </tr>
              </>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Logs;