forked from cerc-io/snowballtools-base
91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { Link, Outlet, useLocation, useOutletContext } from 'react-router-dom';
|
|
|
|
import {
|
|
Tabs,
|
|
TabsHeader,
|
|
TabsBody,
|
|
Tab,
|
|
} from '@snowballtools/material-tailwind-react-fork';
|
|
|
|
import { OutletContextType } from '../../../../types/types';
|
|
|
|
const tabsData = [
|
|
{
|
|
label: 'General',
|
|
icon: '',
|
|
value: 'general',
|
|
},
|
|
{
|
|
label: 'Domains',
|
|
icon: '',
|
|
value: 'domains',
|
|
},
|
|
{
|
|
label: 'Git',
|
|
icon: '',
|
|
value: 'git',
|
|
},
|
|
{
|
|
label: 'Environment variables',
|
|
icon: '',
|
|
value: 'environment-variables',
|
|
},
|
|
{
|
|
label: 'Members',
|
|
icon: '',
|
|
value: 'members',
|
|
},
|
|
];
|
|
|
|
const SettingsTabPanel = () => {
|
|
const { project, onUpdate } = useOutletContext<OutletContextType>();
|
|
|
|
const location = useLocation();
|
|
|
|
const currentTab = useMemo(() => {
|
|
if (project) {
|
|
const currTabArr = location.pathname.split('settings');
|
|
return currTabArr[currTabArr.length - 1];
|
|
} else {
|
|
return;
|
|
}
|
|
}, [location, project]);
|
|
|
|
return (
|
|
<>
|
|
<Tabs
|
|
value={currentTab}
|
|
orientation="vertical"
|
|
className="grid grid-cols-4"
|
|
>
|
|
<TabsHeader
|
|
className="bg-transparent col-span-1"
|
|
indicatorProps={{
|
|
className: 'bg-gray-900/10 shadow-none !text-gray-900',
|
|
}}
|
|
>
|
|
{tabsData.map(({ label, value, icon }) => (
|
|
<Link key={value} to={value === 'general' ? '' : value}>
|
|
<Tab
|
|
value={value === 'general' ? '' : `/${value}`}
|
|
className="flex justify-start"
|
|
>
|
|
<div className="flex gap-2">
|
|
<div>{icon}</div>
|
|
<div>{label}</div>
|
|
</div>
|
|
</Tab>
|
|
</Link>
|
|
))}
|
|
</TabsHeader>
|
|
<TabsBody className="col-span-2">
|
|
<Outlet context={{ project, onUpdate }} />
|
|
</TabsBody>
|
|
</Tabs>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SettingsTabPanel;
|