File Viewer 组件

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans antialiased">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">

    <!-- Header Section -->
    <div class="p-4 sm:px-6 md:px-8 bg-indigo-100 dark:bg-gray-800 border-b border-indigo-200 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-lg sm:text-xl md:text-2xl font-semibold text-indigo-800 dark:text-indigo-300">
        <i class="fas fa-file-alt mr-2 text-indigo-600 dark:text-indigo-400"></i>
        Project Overview Document
      </h2>
      <button aria-label="Download file" class="p-2 rounded-full text-indigo-600 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200 ease-in-out">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
        </svg>
      </button>
    </div>

    <!-- File Details / Toolbar -->
    <div class="p-4 sm:px-6 md:px-8 bg-purple-50 dark:bg-gray-800 flex items-center justify-between text-sm sm:text-base text-purple-700 dark:text-purple-300 border-b border-purple-100 dark:border-gray-700">
      <div class="flex items-center space-x-4">
        <span class="font-medium">Size:</span>
        <span>2.1 MB</span>
        <span class="font-medium ml-4">Type:</span>
        <span>PDF</span>
      </div>
      <div class="flex space-x-2">
        <button aria-label="Print file" class="p-2 rounded-md hover:bg-purple-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6m4 0v-4a2 2 0 00-2-2H7a2 2 0 00-2 2v4a2 2 0 002 2h6m0-0V9a2 2 0 00-2-2H9a2 2 0 00-2 2v8" />
          </svg>
        </button>
        <button aria-label="Share file" class="p-2 rounded-md hover:bg-purple-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.865 13.103 9.172 13 9.5 13h4s.328-.103.51-.342c.18-.242.067-.577-.253-.78L12 9l-2.757 2.22c-.32.203-.433.54-.253.78zM14 6v.01M10 6v.01M12 2v.01M5 19v.01M19 19v.01M12 16v.01M12 18a2 2 0 100-4 2 2 0 000 4zM21 12c0 2.21-3.134 4-7 4s-7-1.79-7-4 3.134-4 7-4 7 1.79 7 4z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Content Area (Mimics Paper) -->
    <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 leading-relaxed font-serif relative overflow-hidden">
      <div class="absolute inset-0 px-4 sm:px-6 md:px-8 py-4 sm:py-6 md:py-8 pointer-events-none z-10 opacity-75 dark:opacity-60">
        <div class="bg-white dark:bg-gray-800 w-full h-full rounded-sm shadow-inner dark:shadow-none" style="filter: url(#grain);"></div>
      </div>
      <svg>
        <filter id="grain">
          <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"></feTurbulence>
          <feComposite operator="in" in2="SourceGraphic"></feComposite>
          <feColorMatrix type="saturate" values="0"></feColorMatrix>
        </filter>
      </svg>

      <div class="relative z-20 space-y-4">
        <p class="mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Introduction</p>
        <p class="text-justify">
          This document provides a comprehensive overview of the 'Horizon' project, outlining its objectives, scope, and key deliverables. Initiated in Q3, the Horizon project aims to revolutionize our service delivery model, enhancing efficiency and customer satisfaction through innovative technological solutions. It represents a significant strategic investment aligned with our long-term growth aspirations.
        </p>

        <p class="mt-6 mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Project Objectives</p>
        <ul class="list-disc list-inside space-y-2 text-justify">
          <li>Streamline internal workflows by <strong>30%</strong>, reducing operational costs.</li>
          <li>Improve customer satisfaction scores by <strong>15%</strong> through enhanced service accessibility.</li>
          <li>Deploy a new, scalable cloud-based infrastructure by end of Q4.</li>
          <li>Foster cross-departmental collaboration and knowledge sharing.</li>
        </ul>

        <p class="mt-6 mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Timeline & Milestones</p>
        <img src="https://picsum.photos/600/300?random=1" alt="Project Timeline Placeholder" class="w-full h-auto rounded-md shadow-sm border border-gray-200 dark:border-gray-700 object-cover my-4">
        <p class="text-sm text-gray-600 dark:text-gray-400 italic">Figure 1: High-level project timeline.</p>

        <p class="mt-6 mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Contributors</p>
        <div class="flex flex-wrap items-center gap-4">
          <figure class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe" class="w-10 h-10 rounded-full border-2 border-indigo-300 dark:border-indigo-600 shadow-sm">
            <figcaption class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</figcaption>
          </figure>
          <figure class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith" class="w-10 h-10 rounded-full border-2 border-purple-300 dark:border-purple-600 shadow-sm">
            <figcaption class="text-sm font-medium text-gray-700 dark:text-gray-300">Jane Smith</figcaption>
          </figure>
        </div>
      </div>
    </div>

    <!-- Footer Section -->
    <div class="p-4 sm:px-6 md:px-8 bg-indigo-100 dark:bg-gray-800 border-t border-indigo-200 dark:border-gray-700 flex items-center justify-between text-sm text-indigo-700 dark:text-indigo-400">
      <span>Page 1 of 3</span>
      <span class="text-right">Last Updated: October 26, 2023</span>
    </div>

  </div>
</div>