reservation nav responsiveness handled

buggyGrandma · Dec 28, 2023 · 59a98db · 59a98db
1 parent f5769dd
commit 59a98db
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/app/class-reservation/ReservationNav/index.tsx b/app/class-reservation/ReservationNav/index.tsx
@@ -1,13 +1,36 @@
 import ReservationStep from "./ReservationStep";
-
-const ReservationNav = () => {
+interface Props {
+  step: "register" | "completeInfo" | "check";
+}
+const ReservationNav = ({ step }: Props) => {
+  const renderedLine1 =
+    step === "completeInfo"
+      ? "border-[#DCDCDC] border-dashed"
+      : "border-[#0CAC67]";
+  const renderedLine2 =
+    step === "check" ? "border-[#0CAC67]" : "border-[#DCDCDC] border-dashed";
   return (
-    <div className="h-[130px] flex justify-center items-center absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] ">
-      <ReservationStep step="completeInfo" stepState="done" />
-      <div className="w-[170px] h-[2px] border-b-2 border-[#DCDCDC] border-dashed" />
-      <ReservationStep step="register" stepState="done" />
-      <div className="w-[170px] h-[2px] border-b-2 border-[#DCDCDC] border-dashed" />
-      <ReservationStep step="check" stepState="active" />
+    <div className="w-full max-w-[930px]  md:h-[130px] flex justify-center items-center  md:absolute md:top-[50%] md:left-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ">
+      <ReservationStep
+        step="completeInfo"
+        stepState={step === "completeInfo" ? "active" : "done"}
+      />
+      <div
+        className={`${renderedLine1} w-full max-w-[170px] h-[2px] border-b-2`}
+      />
+      <ReservationStep
+        step="register"
+        stepState={
+          step === "register" ? "active" : step === "check" ? "done" : "pending"
+        }
+      />
+      <div
+        className={`${renderedLine2} w-full max-w-[170px] h-[2px] border-b-2`}
+      />
+      <ReservationStep
+        step="check"
+        stepState={step === "check" ? "active" : "pending"}
+      />
     </div>
   );
 };

diff --git a/app/class-reservation/layout.tsx → ...rvation/information-completion/layout.tsx b/app/class-reservation/layout.tsx → ...rvation/information-completion/layout.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from "react";
-import CloseButton from "./information-completion/CloseButton";
-import MobileCloseButton from "./information-completion/MobileCloseButton";
-import ReservationNav from "./ReservationNav";
+import CloseButton from "./CloseButton";
+import MobileCloseButton from "./MobileCloseButton";
+import ReservationNav from "../ReservationNav";
 
 const classReservasionLayout = ({
   children,
@@ -12,12 +11,12 @@ const classReservasionLayout = ({
     <main>
       <div dir="rtl" className="md:pt-[56px] bg-gray-500 h-[100vh]">
         <div className="relative border-b h-[64px] md:h-[130px] md:px-[60px] flex items-center w-full bg-white md:rounded-t-[24px] ">
-          <ReservationNav />
           <div className="hidden md:flex items-center">
             <CloseButton />
             <div className="text-[14px] text-[#757575] font-normal">
               برای رزرو کلاس ترمیک اطلاعات زیر را تکمیل کنید.
             </div>
+            <ReservationNav step="completeInfo" />
           </div>
           <div className="flex gap-[8px] px-[8px] items-center md:hidden">
             <MobileCloseButton />
@@ -26,6 +25,9 @@ const classReservasionLayout = ({
             </div>
           </div>
         </div>
+        <div className="md:hidden h-[105px] py-[12px] px-10 border-b bg-white">
+          <ReservationNav step="completeInfo" />
+        </div>
         <div className="p-4 gap-4 flex flex-col justify-center items-center bg-[#F8F8FB] h-fit">
           {children}
         </div>