You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
988 B
TypeScript
41 lines
988 B
TypeScript
// frontend/components/SubRail.tsx
|
|
"use client";
|
|
import { Icon } from "./Icon";
|
|
import type { IconName } from "./icons/paths";
|
|
|
|
export type RailItem =
|
|
| { sep: true }
|
|
| { sep?: false; id: string; icon: IconName; label: string; dot?: boolean };
|
|
|
|
export function SubRail({
|
|
items,
|
|
active,
|
|
onPick,
|
|
}: {
|
|
items: RailItem[];
|
|
active: string;
|
|
onPick: (id: string) => void;
|
|
}) {
|
|
return (
|
|
<aside className="rail">
|
|
{items.map((r, i) =>
|
|
"sep" in r && r.sep ? (
|
|
<span className="sp" key={`s${i}`} />
|
|
) : (
|
|
<button
|
|
key={r.id}
|
|
className={active === r.id ? "active" : ""}
|
|
onClick={() => onPick(r.id)}
|
|
aria-label={r.label}
|
|
aria-current={active === r.id ? "page" : undefined}
|
|
>
|
|
<Icon name={r.icon} />
|
|
{r.dot && <span className="rdot" />}
|
|
<span className="tip">{r.label}</span>
|
|
</button>
|
|
),
|
|
)}
|
|
</aside>
|
|
);
|
|
}
|