From 6b6582c28752311402c644d54a1e0f2f2de6fd3c Mon Sep 17 00:00:00 2001
From: Sushan Yadav <sushanyadav98@gmail.com>
Date: Wed, 28 Feb 2024 16:56:28 +0545
Subject: [PATCH] feat: top section

---
 .../src/pages/org-slug/projects/Id.tsx        | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx
index 37ce9719..92250632 100644
--- a/packages/frontend/src/pages/org-slug/projects/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx
@@ -3,28 +3,23 @@ import {
   Link,
   Outlet,
   useLocation,
-  useNavigate,
+  // useNavigate,
   useParams,
 } from 'react-router-dom';
 import { Project as ProjectType } from 'gql-client';
 
-import {
-  Button,
-  Tab,
-  Tabs,
-  TabsBody,
-  TabsHeader,
-  Typography,
-} from '@material-tailwind/react';
+import { Tab, Tabs, TabsBody, TabsHeader } from '@material-tailwind/react';
 
-import HorizontalLine from '../../../components/HorizontalLine';
 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';
 
 const Id = () => {
   const { id } = useParams();
   const { octokit } = useOctokit();
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
   const client = useGQLClient();
   const location = useLocation();
 
@@ -69,7 +64,16 @@ const Id = () => {
     <div className="h-full">
       {project ? (
         <>
-          <div className="flex p-4 gap-4 items-center">
+          <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"
@@ -93,8 +97,9 @@ const Id = () => {
             <Button className="rounded-full" color="blue" placeholder={''}>
               Go to app
             </Button>
-          </div>
-          <HorizontalLine />
+          </div> */}
+          <WavyBorder className="h-6" />
+          {/* <HorizontalLine /> */}
           <div className="p-4">
             <Tabs value={currentTab}>
               <TabsHeader