Komponenten Dateibetrachter Datei-Viewer-Komponente

Datei-Viewer-Komponente

Eine von Material Design inspirierte Dateibetrachter-Komponente, die eine Liste von Dateien mit Vorschaubildern, Dateinamen, Dateigrößen und einem Benutzeravatar anzeigt. Es unterstützt responsives Design und dunkles Design.

Vorschau

HTML-Code

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold mb-4">File Viewer</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

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