ファイルビューアコンポーネント
マテリアルデザインにインスパイアされたファイルビューアコンポーネントで、プレビュー画像、ファイル名、ファイルサイズ、ユーザーアバターを含むファイルのリストを表示します。レスポンシブデザインとダークテーマをサポートしています。
HTMLコード
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
<h2 class="text-xl font-semibold mb-4">File Viewer</h2>
<div class="grid grid-cols-1 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
</div>
</div>
</div>
</div>