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.
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>Composants associés
Composant Retro File Viewer
Un composant de visionneuse de fichiers complexe et réactif avec une esthétique rétro/vintage des années 80/90, une palette de couleurs neutres chaudes, conçu pour les interfaces finance/banque. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant Visionneuse de fichiers
Visionneuse de fichiers de style neumorphique pour le commerce électronique qui affiche une image et les détails d’un fichier. Fournit une expérience d’interface utilisateur douce avec prise en charge du thème sombre.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers skeuomorphe avec une palette de couleurs pastel, conçu pour le commerce électronique, avec une mise en page réactive et une prise en charge du mode sombre. Il imite un dossier physique avec des onglets et une zone de contenu.