File Viewer Component

<div class="container mx-auto p-6">

  <!-- File Header -->
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">File Viewer</h2>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
      </button>
    </div>
  </div>

  <!-- File List -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m3 5v-5m3 5v-5M9 8h6m-be 4h6m-3-4a3 3 0 01-3-3V4a3 3 0 013-3h2a3 3 0 013 3v1a3 3 0 01-3 3h-2a3 3 0 01-3-3z" />
          </svg>
          <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
          </div>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
        <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Download</button>
      </div>
    </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 mr-4" 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 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image.png</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">View</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-7.072a9 9 0 010 12.728m-9.193-2.829a5 5 0 010-7.072M6.343 4.515a9 9 0 010 12.728M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Audio.mp3</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">3.5 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Listen</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h18M3 16h18" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Watch</button>
        </div>
      </div>

  </div>

</div>