File Tree With Type Icons

<!-- The colour hints at the file type from its extension; the icon stays
     aria-hidden so a screen reader is never asked to read a decorative glyph. -->
<nav class="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">
  <ul role="tree" aria-label="Project files" class="space-y-0.5">
    <li role="treeitem" aria-expanded="true">
      <button type="button" class="flex w-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left hover:bg-gray-100 dark:hover:bg-gray-900">
        <svg viewBox="0 0 16 16" fill="currentColor" class="h-3.5 w-3.5 shrink-0 rotate-90 text-gray-400" aria-hidden="true"><path d="M6 4l4 4-4 4z"/></svg>
        <svg viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 shrink-0 text-blue-500" aria-hidden="true"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3L7.5 4H13A1.5 1.5 0 0 1 14.5 5.5v6A1.5 1.5 0 0 1 13 13H3a1.5 1.5 0 0 1-1.5-1.5z"/></svg>
        <span class="truncate font-medium text-gray-900 dark:text-gray-100">app</span>
      </button>
      <ul role="group" class="ml-3 space-y-0.5 border-l border-gray-200 pl-2 sm:ml-4 dark:border-gray-800">
        <li role="treeitem"><span class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900"><span class="w-3.5 shrink-0"></span><svg viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 shrink-0 text-blue-500" aria-hidden="true"><path d="M4 1.5h4.6L13 5.9V14a.5.5 0 0 1-.5.5h-8A.5.5 0 0 1 4 14V2a.5.5 0 0 1 .5-.5z"/></svg><span class="truncate">page.tsx</span></span></li>
        <li role="treeitem"><span class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900"><span class="w-3.5 shrink-0"></span><svg viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 shrink-0 text-sky-500" aria-hidden="true"><path d="M4 1.5h4.6L13 5.9V14a.5.5 0 0 1-.5.5h-8A.5.5 0 0 1 4 14V2a.5.5 0 0 1 .5-.5z"/></svg><span class="truncate">globals.css</span></span></li>
      </ul>
    </li>
    <li role="treeitem"><span class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900"><span class="w-3.5 shrink-0"></span><svg viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 shrink-0 text-amber-500" aria-hidden="true"><path d="M4 1.5h4.6L13 5.9V14a.5.5 0 0 1-.5.5h-8A.5.5 0 0 1 4 14V2a.5.5 0 0 1 .5-.5z"/></svg><span class="truncate">tsconfig.json</span></span></li>
  </ul>
</nav>