cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

feat: add layout

Browse Source
This commit is contained in:
Sushan Yadav 2024-02-28 17:35:02 +05:45
parent acf5aab26f
commit f34eb48d1e
2 changed files with 54 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
packages/frontend/src/pages/org-slug/projects/Id.tsx
View File

@ -3,23 +3,23 @@ import {
Link, Link,
Outlet, Outlet,
useLocation, useLocation,
// useNavigate, useNavigate,
useParams, useParams,
} from 'react-router-dom'; } from 'react-router-dom';
import { Project as ProjectType } from 'gql-client'; import { Project as ProjectType } from 'gql-client';
import { Tab, Tabs, TabsBody, TabsHeader } from '@material-tailwind/react';
import { useGQLClient } from '../../../context/GQLClientContext'; import { useGQLClient } from '../../../context/GQLClientContext';
import { useOctokit } from '../../../context/OctokitContext'; import { useOctokit } from '../../../context/OctokitContext';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
import { ChevronLeft } from 'components/shared/CustomIcon'; import { ChevronLeft } from 'components/shared/CustomIcon';
import { WavyBorder } from 'components/shared/WavyBorder'; import { WavyBorder } from 'components/shared/WavyBorder';
import { Heading } from 'components/shared/Heading';
import { Tabs } from 'components/shared/Tabs';
const Id = () => { const Id = () => {
const { id } = useParams(); const { id } = useParams();
const { octokit } = useOctokit(); const { octokit } = useOctokit();
// const navigate = useNavigate(); const navigate = useNavigate();
const client = useGQLClient(); const client = useGQLClient();
const location = useLocation(); const location = useLocation();
@ -64,106 +64,61 @@ const Id = () => {
<div className="h-full"> <div className="h-full">
{project ? ( {project ? (
<> <>
<div className="px-6 py-4 flex items-center gap-4"> <div className="px-6 py-4 flex justify-between items-center gap-4">
<Button <div className="flex items-center justify-center gap-4">
variant="tertiary"
className="rounded-full h-11 w-11 p-0"
aria-label="Go back"
leftIcon={<ChevronLeft />}
/>
{repoUrl}
</div>
{/* <div className="flex p-4 gap-4 items-center">
<Button
variant="outlined"
className="rounded-full"
onClick={() => navigate(-1)}
placeholder={''}
>
{'<'}
</Button>
<Typography variant="h3" className="grow" placeholder={''}>
{project?.name}
</Typography>
<Link to={repoUrl} target="_blank">
<Button <Button
className="rounded-full" variant="tertiary"
variant="outlined" className="rounded-full h-11 w-11 p-0"
placeholder={''} aria-label="Go back"
> leftIcon={<ChevronLeft />}
Open Repo onClick={() => navigate(-1)}
</Button> />
</Link> <Heading className="text-2xl font-medium">
<Button className="rounded-full" color="blue" placeholder={''}> {project?.name}
Go to app </Heading>
</Button> </div>
</div> */} <div className="flex items-center justify-center gap-3">
<WavyBorder className="h-6" /> <Link to={repoUrl} target="_blank">
{/* <HorizontalLine /> */} <Button className="h-11 transition-colors" variant="tertiary">
<div className="p-4"> Open repo
<Tabs value={currentTab}> </Button>
<TabsHeader </Link>
className="rounded-none border-b border-blue-gray-50 bg-transparent p-0" <Button className="h-11 transition-colors">Go to app</Button>
indicatorProps={{ </div>
className: </div>
'bg-transparent border-b-2 border-gray-900 shadow-none rounded-none', <WavyBorder />
}} <div className="px-6 ">
placeholder={''} <Tabs value={currentTab} className="flex-col pt-6">
> <Tabs.List>
<Link to=""> <Tabs.Trigger value="">
<Tab <Link to="">Overview</Link>
value="" </Tabs.Trigger>
className={'p-2 cursor-pointer'} <Tabs.Trigger value="deployments">
placeholder={''} <Link to="deployments">Deployments</Link>
> </Tabs.Trigger>
Overview <Tabs.Trigger value="database">
</Tab> <Link to="database">Database</Link>
</Link> </Tabs.Trigger>
<Link to="deployments"> <Tabs.Trigger value="integrations">
<Tab <Link to="integrations">Integrations</Link>
value="deployments" </Tabs.Trigger>
className={'p-2 cursor-pointer'} <Tabs.Trigger value="settings">
placeholder={''} <Link to="settings">Settings</Link>
> </Tabs.Trigger>
Deployments </Tabs.List>
</Tab> {/* Not wrapping in Tab.Content because we are using Outlet */}
</Link> <div className="py-7">
<Link to="database">
<Tab
value="database"
className={'p-2 cursor-pointer'}
placeholder={''}
>
Database
</Tab>
</Link>
<Link to="integrations">
<Tab
value="integrations"
className={'p-2 cursor-pointer'}
placeholder={''}
>
Integrations
</Tab>
</Link>
<Link to="settings">
<Tab
value="settings"
className={'p-2 cursor-pointer'}
placeholder={''}
>
Settings
</Tab>
</Link>
</TabsHeader>
<TabsBody placeholder={''}>
<Outlet context={{ project, onUpdate }} /> <Outlet context={{ project, onUpdate }} />
</TabsBody> </div>
</Tabs> </Tabs>
</div> </div>
</> </>
) : ( ) : (
<h4>Project not found</h4> <div className="grid place-items-center h-[calc(100vh-174px)]">
<Heading as="h4" className="text-2xl font-medium">
Project not found.
</Heading>
</div>
)} )}
</div> </div>
); );

2
packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
View File

@ -115,7 +115,7 @@ const OverviewTabPanel = () => {
}, [project]); }, [project]);
return ( return (
<div className="grid grid-cols-5 gap-[72px] mt-7"> <div className="grid grid-cols-5 gap-[72px]">
<div className="col-span-3"> <div className="col-span-3">
<div className="flex items-center gap-4 mb-6"> <div className="flex items-center gap-4 mb-6">
<Avatar <Avatar