Brutalist Dashboard 맵 컴포넌트

<div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Map Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
        <div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
          [Interactive Map Placeholder]
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric A</h3>
            <p class="text-xl text-green-600 dark:text-green-400">1,245</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric B</h3>
            <p class="text-xl text-red-600 dark:text-red-400">489</p>
          </div>
        </div>
      </div>

      <!-- Data Visualization Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
        <div class="space-y-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Sales Performance</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">User Engagement</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
      <h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
      <table class="min-w-full border-collapse border border-black dark:border-lime-400">
        <thead>
          <tr>
            <th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>John Doe</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
          </tr>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
               <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>Jane Smith</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>