Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec prise en charge du mode sombre
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>Composants associés
Composant Visionneuse de fichiers - Musique/Audio
Un composant de visionneuse de fichiers complexe et réactif conçu pour les plateformes musicales et audio, doté d’une esthétique Material Design avec des couleurs vives et la prise en charge du mode sombre.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif pour le commerce électronique avec une conception 3D, une palette de couleurs complémentaire et une mise en page simple, prenant en charge le mode sombre à l’aide de Tailwind CSS. Il affiche des fiches ou des documents sur les produits.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de conception minimaliste et plat adapté à la visualisation de données dans un tableau de bord avec une palette de couleurs monochromatiques et la prise en charge du thème sombre.