From 7dbfe03555dcf16b3c1fd114e08df5bd81005480 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 14:46:17 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20WavyBorder=20c?=
 =?UTF-8?q?omponent=20and=20update=20CreateProjectLayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/WavyBorder/WavyBorder.tsx | 17 +++++++----------
 .../pages/org-slug/projects/create/layout.tsx   |  4 ++--
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx
index a4ab1e0c..22f9fd33 100644
--- a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx
+++ b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx
@@ -1,20 +1,19 @@
 import React, { ComponentPropsWithoutRef, useMemo } from 'react';
 import { cn } from 'utils/classnames';
 
-type WavyBorderType = 'card' | 'layout';
+type WaveBorderVariant = 'card' | 'layout';
 
 export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {
-  type?: WavyBorderType;
+  variant?: WaveBorderVariant;
 }
 
 export const WavyBorder = ({
   className,
-  children,
-  type = 'card',
+  variant = 'card',
   ...props
 }: WavyBorderProps) => {
   const imageSrc = useMemo(() => {
-    switch (type) {
+    switch (variant) {
       case 'card':
         return '/wave-border-card.svg';
       case 'layout':
@@ -22,17 +21,15 @@ export const WavyBorder = ({
       default:
         return '/wave-border-card.svg';
     }
-  }, [type]);
+  }, [variant]);
 
   return (
     <div
       {...props}
-      className={cn('w-full h-1 bg-repeat-x bg-top bg-cover', className)}
+      className={cn('w-full bg-repeat-x h-1 bg-top bg-cover', className)}
       style={{
         backgroundImage: `url(${imageSrc})`,
       }}
-    >
-      {children}
-    </div>
+    />
   );
 };
diff --git a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
index 3c131bb4..669fc562 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
@@ -25,11 +25,11 @@ export const CreateProjectLayout = ({
           </Heading>
           <Link to={`/${orgSlug}`}>
             <Button iconOnly variant="tertiary">
-              <CrossIcon />
+              <CrossIcon size={18} />
             </Button>
           </Link>
         </div>
-        <WavyBorder type="layout" />
+        <WavyBorder variant="layout" />
       </div>
       <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
         <Outlet />