From 274762cbfecd8700636a6fdcb30f14bb49822451 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 6 Mar 2024 14:14:10 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20project?=
 =?UTF-8?q?=20mobile=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../org-slug/projects/create/Template.tsx      | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index 3d61792d..1f4236ff 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -14,11 +14,15 @@ import {
 } from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 import { Steps } from 'components/shared/Steps';
+import { useMediaQuery } from 'usehooks-ts';
 
 // TODO: Set dynamic route for template and load details from DB
 const CreateWithTemplate = () => {
   const { orgSlug } = useParams();
 
+  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
+  const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
+
   const stepperValues = [
     {
       step: 1,
@@ -47,7 +51,7 @@ const CreateWithTemplate = () => {
   );
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center gap-6 md:gap-10">
       <div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
         <div className="flex items-center gap-3">
           <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
@@ -69,11 +73,15 @@ const CreateWithTemplate = () => {
           </a>
         </div>
       </div>
-      <div className="grid grid-cols-3 w-5/6 p-6">
-        <div>
-          <Steps currentIndex={activeStep} steps={stepperValues} />
+      <div className="grid grid-cols-3 w-5/6 p-0 md:p-6 gap-8 md:gap-0">
+        <div className="col-span-3 md:col-span-1">
+          <Steps
+            orientation={stepsOrientation}
+            currentIndex={activeStep}
+            steps={stepperValues}
+          />
         </div>
-        <div className="col-span-2">
+        <div className="col-span-3 md:col-span-2">
           <Outlet context={{ template }} />
         </div>
       </div>