Avatar Upload

<!--
  Resting (no photo) state. The chosen image is an object URL created at runtime,
  so the preview swap and its revokeObjectURL live in the React/TS tabs. The
  label is the trigger for a peer sr-only input, so it keeps a real tab stop.
-->
<div class="flex items-center gap-4">
  <div class="h-20 w-20 overflow-hidden rounded-full border border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="h-full w-full p-4 text-gray-400 dark:text-gray-500" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.5 19.5a7.5 7.5 0 0 1 15 0" />
    </svg>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Profile photo</p>
    <input id="avatar-input" type="file" accept="image/*" class="peer sr-only" />
    <label for="avatar-input" class="mt-2 inline-flex min-h-9 cursor-pointer items-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-100 hover:text-gray-900 peer-focus-visible:ring-2 peer-focus-visible:ring-blue-600 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:peer-focus-visible:ring-blue-400 dark:peer-focus-visible:ring-offset-gray-950">
      Upload
    </label>
    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">JPG, PNG or GIF.</p>
  </div>
</div>