Datei-Viewer-Komponente
Responsive File Viewer-Komponente mit Unterstützung für den Dunkelmodus
HTML-Code
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-6 w-full max-w-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">File Viewer</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0015.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Document.pdf</p>
<p class="text-xs text-gray-500 dark:text-gray-300">1.2 MB</p>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Image.png</p>
<p class="text-xs text-gray-500 dark:text-gray-300">800 KB</p>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 012-2h2a2 2 0 012 2v6m3 0H9m1a1 1 0 00-1 1v2m1-3h0a2 2 0 012-2h2a2 2 0 012 2h0m-5-13V5a2 2 0 012-2h2a2 2 0 012 2v2M6 19a2 2 0 002-2V5a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h2z" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Archive.zip</p>
<p class="text-xs text-gray-500 dark:text-gray-300">5.5 MB</p>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</button>
</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.
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.