simple-fs-server/islands/UpList.tsx

48 lines
1.3 KiB
TypeScript
Raw Normal View History

2023-01-06 18:24:27 +09:00
import { asset, Head } from "$fresh/runtime.ts";
2023-01-05 18:18:07 +09:00
import { join } from "path/posix.ts";
import { ComponentChild } from "preact";
2023-01-06 18:17:36 +09:00
import { encodePath } from "../util/util.ts";
2023-01-05 18:18:07 +09:00
2023-01-06 18:24:27 +09:00
function stairs(path: string) {
if (path === ".") return [];
2023-01-14 03:03:58 +09:00
const uplist = path.split("/").filter((x) => x.length > 0);
2023-01-06 18:24:27 +09:00
let current = ".";
const stairs = [];
for (const up of uplist) {
current = join(current, up);
stairs.push([current, up]);
}
return stairs;
2023-01-05 18:18:07 +09:00
}
2023-01-06 18:24:27 +09:00
export default function UpList(props: { path: string }) {
const data = props;
const uplist = stairs(data.path);
return (
<div>
<h1 class={"text-2xl flex flex-wrap"}>
2023-01-06 22:17:45 +09:00
<a
href="/dir/?pretty"
class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm"
>
2023-01-06 18:24:27 +09:00
<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"
2023-01-14 03:03:22 +09:00
href={`/dir/${encodePath(cur)}/?pretty`}
2023-01-06 18:24:27 +09:00
>
<img src={asset("/icon/folder.svg")} />
<span class="ml-1">{up}</span>
</a>
</>
))}
</h1>
</div>
);
}