From d6306e1b1e02bdb64d5ac307164df71747423a10 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 12:18:09 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20create=20proje?=
 =?UTF-8?q?ct=20layout=20and=20restyling=20it?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/org-slug/projects/Create.tsx    | 34 ----------------
 .../pages/org-slug/projects/create/layout.tsx | 39 +++++++++++++++++++
 .../src/pages/org-slug/projects/routes.tsx    |  4 +-
 3 files changed, 41 insertions(+), 36 deletions(-)
 delete mode 100644 packages/frontend/src/pages/org-slug/projects/Create.tsx
 create mode 100644 packages/frontend/src/pages/org-slug/projects/create/layout.tsx

diff --git a/packages/frontend/src/pages/org-slug/projects/Create.tsx b/packages/frontend/src/pages/org-slug/projects/Create.tsx
deleted file mode 100644
index 2f12b981..00000000
--- a/packages/frontend/src/pages/org-slug/projects/Create.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { Outlet, Link, useParams } from 'react-router-dom';
-
-import { IconButton } from '@material-tailwind/react';
-
-import HorizontalLine from '../../../components/HorizontalLine';
-
-const CreateProject = () => {
-  const { orgSlug } = useParams();
-  return (
-    <div className="h-full">
-      <div className="flex p-4 items-center">
-        <div className="grow">
-          <h3 className="text-gray-750 text-2xl">Create new project</h3>
-        </div>
-        <div>
-          <Link to={`/${orgSlug}`}>
-            <IconButton
-              className="rounded-full"
-              variant="outlined"
-              placeholder={''}
-            >
-              X
-            </IconButton>
-          </Link>
-        </div>
-      </div>
-      <HorizontalLine />
-      <Outlet />
-    </div>
-  );
-};
-
-export default CreateProject;
diff --git a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
new file mode 100644
index 00000000..d51ea6b9
--- /dev/null
+++ b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
@@ -0,0 +1,39 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { Link, Outlet, useParams } from 'react-router-dom';
+
+import { Heading } from 'components/shared/Heading';
+import { WavyBorder } from 'components/shared/WavyBorder';
+import { Button } from 'components/shared/Button';
+import { CrossIcon } from 'components/shared/CustomIcon';
+import { cn } from 'utils/classnames';
+
+export interface CreateProjectLayoutProps
+  extends ComponentPropsWithoutRef<'section'> {}
+
+export const CreateProjectLayout = ({
+  className,
+  ...props
+}: CreateProjectLayoutProps) => {
+  const { orgSlug } = useParams();
+
+  return (
+    <section {...props} className={cn('h-full flex flex-col', className)}>
+      <div className="sticky top-0">
+        <div className="flex px-6 py-4 bg-base-bg items-center gap-4">
+          <Heading className="flex-1 text-[24px] font-medium">
+            Create new project
+          </Heading>
+          <Link to={`/${orgSlug}`}>
+            <Button iconOnly variant="tertiary">
+              <CrossIcon />
+            </Button>
+          </Link>
+        </div>
+        <WavyBorder type="layout" />
+      </div>
+      <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
+        <Outlet />
+      </section>
+    </section>
+  );
+};
diff --git a/packages/frontend/src/pages/org-slug/projects/routes.tsx b/packages/frontend/src/pages/org-slug/projects/routes.tsx
index 993e22b3..e4dd5756 100644
--- a/packages/frontend/src/pages/org-slug/projects/routes.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/routes.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
-import CreateProject from './Create';
 import Id from './Id';
 import AddDomain from './id/settings/domains/add';
 import { createProjectRoutes } from './create/routes';
 import { projectTabRoutes } from './id/routes';
 import { addDomainRoutes } from './id/settings/domains/add/routes';
+import { CreateProjectLayout } from './create/layout';
 
 export const projectsRoutesWithoutSearch = [
   {
     path: 'create',
-    element: <CreateProject />,
+    element: <CreateProjectLayout />,
     children: createProjectRoutes,
   },
   {