simple-fs-server/islands/UpList.tsx

import { asset, Head } from "$fresh/runtime.ts";
import { join } from "path/posix.ts";
import { ComponentChild } from "preact";
import { encodePath } from "../util/util.ts";

function stairs(path: string) {
  if (path === ".") return [];
  const uplist = path.split("/").filter(x=> x.length > 0);
  let current = ".";
  const stairs = [];
  for (const up of uplist) {
    current = join(current, up);
    stairs.push([current, up]);
  }
  return stairs;
}

export default function UpList(props: { path: string }) {
  const data = props;
  const uplist = stairs(data.path);

  return (
    <div>
      <h1 class={"text-2xl flex flex-wrap"}>
        <a
          href="/dir/?pretty"
          class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm"
        >
          <img src={asset("/icon/house.svg")} />
          <span class="ml-1">Home</span>
        </a>
        {uplist.map(([cur, up], i) => (
          <>
            <span class="p-2">/</span>
            <a
              class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm"
              href={`/dir/${encodePath(cur)}/?pretty`}
            >
              <img src={asset("/icon/folder.svg")} />
              <span class="ml-1">{up}</span>
            </a>
          </>
        ))}
      </h1>
    </div>
  );
}