Componentes de retroalimentación Componente

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Feedback Card Container -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden mb-8">

    <!-- Header Section -->
    <div class="bg-indigo-600 dark:bg-indigo-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h2 class="text-2xl sm:text-3xl font-bold mb-1">Community Feedback</h2>
        <p class="text-indigo-100 text-sm sm:text-base">Help us improve by sharing your thoughts.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">feedback</span>
    </div>

    <!-- Feedback Type/Category Selection -->
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 sm:px-6 py-4">
      <div class="flex flex-wrap gap-2 text-sm sm:text-base">
        <button class="px-4 py-2 rounded-full font-medium text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100 shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
          Suggestion
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Bug Report
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Question
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Other
        </button>
      </div>
    </div>

    <!-- Main Feedback Form -->
    <div class="p-4 sm:p-6">
      <form>
        <div class="mb-4">
          <label for="feedback-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Title <span class="text-red-500">*</span></label>
          <input type="text" id="feedback-title" placeholder="e.g., Improve search functionality" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required>
        </div>

        <div class="mb-4">
          <label for="feedback-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description <span class="text-red-500">*</span></label>
          <textarea id="feedback-description" rows="6" placeholder="Provide a detailed description of your feedback, including steps to reproduce bugs if applicable." class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 resize-y transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required></textarea>
        </div>

        <div class="mb-4">
          <label for="attachment" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attachments (Optional)</label>
          <div class="flex items-center space-x-4">
            <label class="cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
              Upload File
              <input type="file" id="attachment" class="hidden">
            </label>
            <span class="text-sm text-gray-500 dark:text-gray-400" id="file-name">No file chosen</span>
          </div>
        </div>

        <div class="mb-6 flex items-center justify-between">
          <label for="email-notification" class="inline-flex items-center cursor-pointer">
            <input type="checkbox" id="email-notification" class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-indigo-600">
            <span class="ml-2 text-sm text-gray-900 dark:text-gray-300">Notify me of updates</span>
          </label>
          <div class="group relative inline-block">
            <spa class="material-icons-outlined text-gray-400 dark:text-gray-500 text-lg sm:text-xl cursor-help">info</span>
            <div class="absolute hidden group-hover:block bg-gray-700 dark:bg-gray-600 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 w-48 shadow-lg z-10 transition duration-300 ease-in-out opacity-0 group-hover:opacity-100 pointer-events-none">
              We'll send you email updates on the status of your feedback.
              <div class="absolute left-1/2 -ml-1 bottom-0 transform translate-y-full border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-600"></div>
            </div>
          </div>
        </div>

        <div class="flex justify-end space-x-3">
          <button type="button" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Cancel
          </button>
          <button type="submit" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Recently Submitted Feedback Section (Example) -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="bg-emerald-600 dark:bg-emerald-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h3 class="text-xl sm:text-2xl font-bold mb-1">Recent Submissions</h3>
        <p class="text-emerald-100 text-sm sm:text-base">See what others are suggesting.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">forum</span>
    </div>
    <div class="p-4 sm:p-6 space-y-4">

      <!-- Feedback Item 1 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe <span class="text-indigo-600 dark:text-indigo-400 ml-2">• Suggestion</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Add dark mode to the forum</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">It would be great to have a dark mode option to reduce eye strain, especially during late-night browsing. The current light theme is a bit too bright.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>2 days ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>15</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>3</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-green-600 dark:text-green-400">In Progress</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 2 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith <span class="text-emerald-600 dark:text-emerald-400 ml-2">• Bug Report</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Profile picture not updating</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">When I try to upload a new profile picture, it appears to upload successfully but the old picture remains visible after refreshing the page. Tried multiple browsers.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>5 hours ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>7</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>1</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-orange-600 dark:text-orange-400">Investigating</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 3 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Peter Jones <span class="text-purple-600 dark:text-purple-400 ml-2">• Question</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">How to embed videos in posts?</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">I'm trying to share a YouTube video in my post but the embed code doesn't seem to work. Is there a specific way to do this or is it not supported?</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>1 day ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>8</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>5</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-blue-600 dark:text-blue-400">Answered</span></p>
          </div>
        </div>
      </div>

    </div>
    <div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm font-medium">View All Feedback</a>
    </div>
  </div>

  <!-- Required for Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

  <!-- Dummy JS for file input label and tooltip (not part of the JSON output requirements, but for live demo functionality) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const fileInput = document.getElementById('attachment');
      const fileNameSpan = document.getElementById('file-name');
      if (fileInput) {
        fileInput.addEventListener('change', (event) => {
          const fileName = event.target.files[0] ? event.target.files[0].name : 'No file chosen';
          fileNameSpan.textContent = fileName;
        });
      }
    });
  </script>

</div>