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.
HTML-Code
<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>Verwandte Komponenten
Dateibetrachter-Komponente - Musik/Audio
Eine komplexe, reaktionsschnelle Dateibetrachtungskomponente, die für Musik- und Audioplattformen entwickelt wurde und sich durch eine Material-Design-Ästhetik mit lebendigen Farben und Unterstützung für den Dunkelmodus auszeichnet.