파일 뷰어 구성 요소

<div class="dark:bg-stone-900 bg-stone-800 text-stone-300 min-h-screen p-4 sm:p-6 lg:p-8 font-sans antialiased">

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">

    <!-- Left Column: File List -->
    <div class="lg:col-span-1 bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
      <div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800 flex items-center justify-between">
        <h2 class="text-lg sm:text-xl font-semibold text-stone-200">Documents & Media</h2>
        <button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
          <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="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V3zm0 7a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zm10 0a1 1 0 011-1h3a1 1 0 011 1v6a1 1 0 01-1 1h-3a1 1 0 01-1-1v-6z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <div class="p-4 sm:p-5 space-y-3">
        <!-- Search Bar -->
        <div class="relative">
          <input type="text" placeholder="Search files..." class="w-full p-2 pl-10 rounded-md bg-stone-800 dark:bg-stone-900 border border-stone-700 dark:border-stone-800 focus:outline-none focus:ring-1 focus:ring-amber-600 text-stone-200 placeholder-stone-400">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>

        <!-- File Categories -->
        <div class="space-y-2">
          <a href="#" class="flex items-center justify-between p-3 rounded-md bg-stone-700 dark:bg-stone-800 hover:bg-stone-600 dark:hover:bg-stone-700 transition-colors duration-200">
            <span class="text-stone-100 font-medium flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-orange-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.414L14.586 5A2 2 0 0115 5.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" /></svg> Documents</span>
            <span class="text-sm text-stone-400">124</span>
          </a>
          <a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
            <span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 7a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V7zm5 0a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" /></svg> Videos</span>
            <span class="text-sm text-stone-400">32</span>
          </a>
          <a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
            <span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-400" viewBox="0 0 20 20" fill="currentColor"><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" /></svg> Images</span>
            <span class="text-sm text-stone-400">210</span>
          </a>
          <a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
            <span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-fuchsia-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" /></svg> Audio</span>
            <span class="text-sm text-stone-400">45</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Right Column: File Preview & Details -->
    <div class="lg:col-span-2 space-y-4 lg:space-y-6">

      <!-- Top Section: Preview -->
      <div class="bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
        <div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800 flex items-center justify-between">
          <h2 class="text-lg sm:text-xl font-semibold text-stone-200">Preview</h2>
          <div class="flex space-x-2">
            <button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
              <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="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
              <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="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>

        <div class="p-4 sm:p-5 aspect-w-16 aspect-h-9 flex items-center justify-center bg-stone-800 dark:bg-stone-900 overflow-hidden">
          <!-- Placeholder for file preview -->
          <img src="https://picsum.photos/1280/720?random=1" alt="File preview" class="object-contain max-h-full max-w-full rounded-md shadow-md">
        </div>
      </div>

      <!-- Bottom Section: File Details -->
      <div class="bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
        <div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800">
          <h2 class="text-lg sm:text-xl font-semibold text-stone-200">File Details</h2>
        </div>

        <div class="p-4 sm:p-5 grid grid-cols-1 md:grid-cols-2 gap-4 text-stone-300">
          <div>
            <p class="text-stone-400 text-sm mb-1">File Name</p>
            <p class="text-stone-200 font-medium text-lg">Fitness-Plan-2023-Q3.pdf</p>
          </div>
          <div>
            <p class="text-stone-400 text-sm mb-1">Category</p>
            <p class="text-stone-200 font-medium text-lg">Documents</p>
          </div>
          <div>
            <p class="text-stone-400 text-sm mb-1">Size</p>
            <p class="text-stone-200 font-medium text-lg">2.4 MB</p>
          </div>
          <div>
            <p class="text-stone-400 text-sm mb-1">Last Modified</p>
            <p class="text-stone-200 font-medium text-lg">2023-09-15 10:30 AM</p>
          </div>
          <div class="md:col-span-2">
            <p class="text-stone-400 text-sm mb-1">Description</p>
            <p class="text-stone-300 leading-relaxed text-sm">This document contains the comprehensive fitness plan for the third quarter of 2023, including workout routines, nutrition guidelines, and progress tracking templates for peak athletic performance.</p>
          </div>

          <!-- Shared With -->
          <div class="md:col-span-2 mt-4">
            <h3 class="text-md font-semibold text-stone-200 mb-2">Shared With</h3>
            <div class="flex flex-wrap gap-3">
              <div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of Athlete" class="w-6 h-6 rounded-full object-cover">
                <span class="text-stone-300 text-sm">John Doe (Athlete)</span>
              </div>
              <div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Coach" class="w-6 h-6 rounded-full object-cover">
                <span class="text-stone-300 text-sm">Jane Smith (Coach)</span>
              </div>
              <div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
                <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar of Team Manager" class="w-6 h-6 rounded-full object-cover">
                <span class="text-stone-300 text-sm">Mike Brown (Manager)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>