Sortable Header Table

<!--
  A sortable header is a BUTTON inside the <th>, not a click handler on the cell:
  it has to be reachable by keyboard and announce itself. The state lives on the
  <th> as aria-sort so a screen reader says "ascending" / "descending"; the arrow
  glyph is aria-hidden decoration echoing it. (Wire the button to your sort in
  React/TS - this markup shows the "amount, descending" resting state.)
-->
<div class="w-full overflow-x-auto">
  <table class="w-full min-w-[34rem] border-collapse text-left text-sm">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">
          <button type="button" class="inline-flex items-center gap-1 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">
            Product <span aria-hidden="true" class="text-gray-400">↕</span>
          </button>
        </th>
        <th scope="col" aria-sort="descending" class="px-3 py-2.5 text-right font-medium text-gray-900 dark:text-gray-100">
          <button type="button" class="inline-flex items-center gap-1 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">
            Revenue <span aria-hidden="true" class="text-blue-600 dark:text-blue-400">↓</span>
          </button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-100 dark:border-gray-800">
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Analytics</td>
        <td class="px-3 py-2.5 text-right text-gray-700 dark:text-gray-300">$9,400</td>
      </tr>
      <tr class="border-b border-gray-100 dark:border-gray-800">
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Billing</td>
        <td class="px-3 py-2.5 text-right text-gray-700 dark:text-gray-300">$6,120</td>
      </tr>
    </tbody>
  </table>
</div>