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 Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif avec une esthétique industrielle et des matériaux bruts, mettant en œuvre des neutres chauds et une prise en charge du mode sombre pour la consommation de contenu.
Composant Retro File Viewer
Retro/Vintage File Viewer Composant avec mise en page réactive et prise en charge du thème sombre. Comprend une liste de fichiers avec des icônes et des noms, ainsi qu’une zone de prévisualisation. Utilise des polices et des couleurs de style rétro.
Composant Visionneuse de fichiers
Un composant simple de visionneuse de fichiers skeuomorphe aux couleurs vives, conçu pour un tableau de bord, prenant en charge les modes clair et sombre.