export default function Test(props: { [key: string]: object }) {
    return (
        <div>
            <div>
                <h1>Welcome to the new page!</h1>
                <p>This is a new page created to demonstrate the use of TypeScript and React.</p>
                <pre>{JSON.stringify(props, null, 2)}</pre>
            </div>
            <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                    <tr>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
                            Name
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
                            Title
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
                            Status
                        </th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-gray-200 bg-white">
                    {props.data.map((item: { id: string; name: string; }) => (
                        <tr key={item.name}>
                            <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-900">{item.name}</td>
                            <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-900">{item.title}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}