Developer
543fee5d56
- Fix incorrect relative paths in feature components after directory restructure
- Components in features/{domain}/ were importing ./features/{domain}/X.module.css
instead of ./X.module.css
- Affected: AppShell, GitToolbar, FileEditor, CommitDialog, CommitPanel,
MergeDialog, SettingsTabLayout, InstanceList, TerminalComponent
Quality gates: tsc (pass), eslint (pass), build (pass)
Refs: repo-restructure Task 4.4
47 lines
982 B
TypeScript
47 lines
982 B
TypeScript
import React from "react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import styles from "./SettingsTabLayout.module.css";
|
|
|
|
interface Tab {
|
|
id: string;
|
|
label: string;
|
|
path: string;
|
|
}
|
|
|
|
interface SettingsTabLayoutProps {
|
|
tabs: Tab[];
|
|
children: React.ReactNode;
|
|
basePath: string;
|
|
}
|
|
|
|
export const SettingsTabLayout: React.FC<SettingsTabLayoutProps> = ({
|
|
tabs,
|
|
children,
|
|
basePath,
|
|
}) => {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<div className={styles.settingsLayout}>
|
|
<aside className={styles.settingsSidebar}>
|
|
<nav className={styles.settingsNav}>
|
|
{tabs.map((tab) => (
|
|
<Link
|
|
key={tab.id}
|
|
to={`${basePath}/${tab.path}`}
|
|
className={`${styles.settingsNavLink} ${
|
|
location.pathname.includes(tab.path)
|
|
? styles.settingsNavLinkActive
|
|
: ""
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
<main className={styles.settingsContent}>{children}</main>
|
|
</div>
|
|
);
|
|
};
|