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.
HTML Code
<div class="font-mono bg-gray-200 dark:bg-gray-800 min-h-screen">
<div class="container mx-auto p-4">
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<!-- File List -->
<div class="w-full md:w-1/3 pr-4">
<h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Files</h2>
<ul>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
<span class="text-gray-700 dark:text-gray-300">document.txt</span>
</li>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
<span class="text-gray-700 dark:text-gray-300">image.jpg</span>
</li>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.668V14a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
<span class="text-gray-700 dark:text-gray-300">video.mp4</span>
</li>
</ul>
</div>
<!-- File Preview -->
<div class="w-full md:w-2/3 mt-4 md:mt-0">
<h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Preview</h2>
<div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
Select a file to preview
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif conçu dans un style brutaliste, avec la prise en charge du thème sombre et utilisant Tailwind CSS.
Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec prise en charge du mode sombre
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif avec le style Material Design et la prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant affiche une liste de fichiers avec des icônes, des noms, des tailles et des dates de modification.