snowballtools-base/packages/frontend/src/components/Tab.tsx
Nabarun Gogoi 471412a8d1
Create layout for deployments pannel (#4)
Co-authored-by: neeraj <neeraj.rtly@gmail.com>
2023-12-15 12:13:18 +05:30

73 lines
1.8 KiB
TypeScript

import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Overview from './Overview';
import Deployments from './Deployments';
import { ProjectDetails } from '../types/project';
interface ProjectTabsProps {
project: ProjectDetails;
}
const Database = () => (
<div>
Content of database tab
<p className="block">
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout.
</p>
</div>
);
const Integrations = () => (
<div>
Content of integrations tab
<p className="block">
There are many variations of passages of Lorem Ipsum available.
</p>
</div>
);
const Settings = () => (
<div>
Content of settings tab
<p className="block">
It uses a dictionary of over 200 Latin words, combined with a handful of
model sentence.
</p>
</div>
);
const ProjectTabs = ({ project }: ProjectTabsProps) => {
return (
<Tabs
selectedTabClassName={
'border-b-2 border-gray-900 text-gray-900 focus:outline-none'
}
>
<TabList className="flex border-b border-gray-300 text-gray-400">
<Tab className={'p-2 cursor-pointer'}>Overview</Tab>
<Tab className={'p-2 cursor-pointer'}>Deployments</Tab>
<Tab className={'p-2 cursor-pointer'}>Database</Tab>
<Tab className={'p-2 cursor-pointer'}>Integrations</Tab>
<Tab className={'p-2 cursor-pointer'}>Settings</Tab>
</TabList>
<TabPanel>
<Overview project={project} />
</TabPanel>
<TabPanel>
<Deployments />
</TabPanel>
<TabPanel>
<Database />
</TabPanel>
<TabPanel>
<Integrations />
</TabPanel>
<TabPanel>
<Settings />
</TabPanel>
</Tabs>
);
};
export default ProjectTabs;