Maps Component

<div class="h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex items-center justify-between">
      <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Maps</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Explore</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Saved</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contribute</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-grow container mx-auto px-[10px] py-4 grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Map Area (Placeholder) -->
    <section class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="h-[400px] bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300">
        Map will be loaded here
      </div>
    </section>

    <!-- Sidebar/Details Area -->
    <aside class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Location Details</h2>
      <div class="space-y-4">
        <!-- Example Detail Item -->
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">I</div>
          <p class="text-gray-700 dark:text-gray-300">Information about the location.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">P</div>
          <p class="text-gray-700 dark:text-gray-300">Photos and imagery here.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-red-500 rounded-full flex items-center justify-center text-white font-bold">R</div>
          <p class="text-gray-700 dark:text-gray-300">Reviews and ratings go here.</p>
        </div>
      </div>
    </aside>
  </main>

  <!-- Footer -->
  <footer class="bg-white dark:bg-gray-800 shadow-md mt-4">
    <div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
      © 2023 Maps Component
    </div>
  </footer>
</div>