feat: add layout

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

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

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

@@ -115,7 +115,7 @@ const OverviewTabPanel = () => {
   }, [project]);
 
   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="flex items-center gap-4 mb-6">
           <Avatar