Komponenten Dateibetrachter Datei-Viewer-Komponente

Datei-Viewer-Komponente

Eine Retro-/Vintage-Dateibetrachter-Komponente, die für E-Commerce-Anwendungen entwickelt wurde. Es verfügt über ein monochromatisches Farbschema, ein ansprechendes Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Name</h3>
            <p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Uploaded By</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <p class="text-gray-300 dark:text-gray-400">John Doe</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Preview</h3>
            <img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Actions</h3>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Datei-Viewer-Komponente

Eine reaktionsschnelle Dateibetrachtungskomponente, die nach den Prinzipien des Material Designs entwickelt wurde und Unterstützung für den Dunkelmodus und reaktionsschnelle Effekte bietet.

Offen

Datei-Viewer-Komponente

Eine reaktionsschnelle Dateibetrachter-Komponente für den E-Commerce mit 3D-Design, komplementärem Farbschema und einfachem Layout, die den Dunkelmodus mit Tailwind CSS unterstützt. Es zeigt Produktdateien oder Dokumente an.

Offen

Brutalist File Viewer-Komponente

Eine rohe, fette Dateibetrachterkomponente mit brutalistischen Designprinzipien. Zeichnet sich durch hohen Kontrast, unkonventionelles Layout und absichtlich grobe Elemente aus. Die Komponente enthält eine Dateivorschau, eine Metadatenanzeige und Aktionsschaltflächen in einem strengen Graustufen-Farbschema. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus unter Verwendung von Tailwind CSS dark:-Dienstprogrammklassen. Geeignet für Business-/Corporate-Websites, die einen unverwechselbaren visuellen Ansatz suchen.

Offen