Developer
bbfcde3d1b
Post-write formatter pass on components extracted for reorganize-long-files. No behavioral changes.
72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
/** Tab bar for the workspace detail page. */
|
|
|
|
import { Icon } from "../../icon";
|
|
|
|
export type WorkspaceTab = "files" | "git" | "tools" | "settings";
|
|
|
|
interface Tab {
|
|
id: WorkspaceTab;
|
|
label: string;
|
|
icon: string;
|
|
}
|
|
|
|
const TABS: Tab[] = [
|
|
{ id: "files", label: "Files", icon: "folder" },
|
|
{ id: "git", label: "Git", icon: "branch" },
|
|
{ id: "tools", label: "Tools", icon: "terminal" },
|
|
{ id: "settings", label: "Settings", icon: "settings" },
|
|
];
|
|
|
|
interface WorkspaceTabBarProps {
|
|
active: WorkspaceTab;
|
|
onChange: (tab: WorkspaceTab) => void;
|
|
}
|
|
|
|
export function WorkspaceTabBar({ active, onChange }: WorkspaceTabBarProps) {
|
|
return (
|
|
<nav className="tab-bar" role="tablist">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
className={`tab ${active === tab.id ? "active" : ""}`}
|
|
onClick={() => onChange(tab.id)}
|
|
role="tab"
|
|
aria-selected={active === tab.id}
|
|
type="button"
|
|
>
|
|
<Icon
|
|
name={tab.icon as "folder" | "branch" | "terminal" | "settings"}
|
|
size="sm"
|
|
/>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
export function WorkspaceMobileTabBar({
|
|
active,
|
|
onChange,
|
|
}: WorkspaceTabBarProps) {
|
|
return (
|
|
<nav className="mobile-tab-bar" role="tablist">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
className={`mobile-tab ${active === tab.id ? "active" : ""}`}
|
|
onClick={() => onChange(tab.id)}
|
|
role="tab"
|
|
aria-selected={active === tab.id}
|
|
type="button"
|
|
>
|
|
<Icon
|
|
name={tab.icon as "folder" | "branch" | "terminal" | "settings"}
|
|
/>
|
|
<span>{tab.label}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|