56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
|
import { EpisodesIcon, FilterIcon, ListIcon, RenameIcon, SfvIcon, SubtitlesIcon } from "./Icons";
|
||
|
|
|
||
|
|
export interface PanelDef {
|
||
|
|
id: string;
|
||
|
|
name: string;
|
||
|
|
icon: () => JSX.Element;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Same panel set, same order, as the original's PanelBuilder.defaultSequence().
|
||
|
|
export const PANELS: PanelDef[] = [
|
||
|
|
{ id: "rename", name: "Rename", icon: RenameIcon },
|
||
|
|
{ id: "episodes", name: "Episodes", icon: EpisodesIcon },
|
||
|
|
{ id: "subtitles", name: "Subtitles", icon: SubtitlesIcon },
|
||
|
|
{ id: "sfv", name: "SFV", icon: SfvIcon },
|
||
|
|
{ id: "filter", name: "Filter", icon: FilterIcon },
|
||
|
|
{ id: "list", name: "List", icon: ListIcon },
|
||
|
|
];
|
||
|
|
|
||
|
|
const APP_VERSION = "0.1.0";
|
||
|
|
|
||
|
|
export default function Sidebar({
|
||
|
|
selected,
|
||
|
|
onSelect,
|
||
|
|
}: {
|
||
|
|
selected: string;
|
||
|
|
onSelect: (id: string) => void;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<nav className="sidebar">
|
||
|
|
<ul className="sidebar-list">
|
||
|
|
{PANELS.map((panel) => {
|
||
|
|
const Icon = panel.icon;
|
||
|
|
const isSelected = panel.id === selected;
|
||
|
|
return (
|
||
|
|
<li key={panel.id}>
|
||
|
|
<button
|
||
|
|
className={`sidebar-item${isSelected ? " selected" : ""}`}
|
||
|
|
onClick={() => onSelect(panel.id)}
|
||
|
|
>
|
||
|
|
{isSelected && <span className="sidebar-item-accent" />}
|
||
|
|
<Icon />
|
||
|
|
<span>{panel.name}</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div className="sidebar-footer">
|
||
|
|
<span className="sidebar-wordmark">Renamr</span>
|
||
|
|
<span className="sidebar-version">v{APP_VERSION}</span>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|