feat: add project settings page with tabbed layout
- Create SettingsTabLayout component with sidebar navigation - Create ProjectSettingsPage with General settings tab - Create RepositoriesSettingsTab for repo management - Add Members placeholder tab - Update router with settings routes - Add CSS styles for settings layout - Navigate to /projects/:id/settings from workspace header
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
|
||||
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="settings-layout">
|
||||
<aside className="settings-sidebar">
|
||||
<nav className="settings-nav">
|
||||
{tabs.map((tab) => (
|
||||
<Link
|
||||
key={tab.id}
|
||||
to={`${basePath}/${tab.path}`}
|
||||
className={`settings-nav-link ${
|
||||
location.pathname.includes(tab.path) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
<main className="settings-content">{children}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user