snowballtools-base/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
2024-05-01 21:55:13 -04:00

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;