Catégories

Composants Visionneuse de fichiers

Visionneuse de fichiers

Composant pour l’affichage de documents et de fichiers

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers réactif conçu selon les principes de Material Design, avec prise en charge du mode sombre et effets réactifs.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Document Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: PDF</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 1.2 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=1" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Image Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: JPEG</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 3.4 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=2" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Video Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: MP4</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 20 MB</p>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode CSS -->
<style>
    /* Example dark mode CSS */
    body {
        background-color: #121212;
        color: #ffffff;
    }
</style>

Visionneuse de fichiers Composant 1

Un composant de visualisation de fichiers minimaliste conçu à l’aide de Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres. Affichez des fichiers avec une mise en page épurée, y compris des espaces réservés pour les images et les avatars des utilisateurs.

Ouvrir l’aperçu

                <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>