文件查看器组件 1

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Last Updated: 2023-10-01</p>
            </div>
        </div>
        <div class="flex justify-center">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/seed/picsum/400/250" alt="Placeholder Image">
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">File Name: <span class="font-semibold">example-file.pdf</span></p>
            <p class="text-gray-700 dark:text-gray-300">File Size: <span class="font-semibold">1.2 MB</span></p>
            <p class="text-gray-700 dark:text-gray-300">Uploaded On: <span class="font-semibold">2023-09-25</span></p>
        </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 text-center">
        <button class="bg-blue-500 text-white rounded-md py-2 px-4 transition duration-200 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Download</button>
    </div>
</div>