Retro File Viewer 구성 요소
레트로/빈티지 파일 뷰어 반응형 레이아웃과 어두운 테마를 지원하는 구성 요소. 아이콘과 이름이 있는 파일 목록과 미리 보기 영역이 포함되어 있습니다. 레트로 스타일의 글꼴과 색상을 사용합니다.
HTML 코드
<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>