resrvation nav handled

buggyGrandma · Dec 28, 2023 · f5769dd · f5769dd
1 parent 54018c2
commit f5769dd
Show file tree

Hide file tree

Showing 10 changed files with 245 additions and 24 deletions.
diff --git a/app/class-reservation/ReservationNav.tsx b/app/class-reservation/ReservationNav.tsx
diff --git a/app/class-reservation/ReservationNav/CheckIcon.tsx b/app/class-reservation/ReservationNav/CheckIcon.tsx
@@ -0,0 +1,61 @@
+const CheckIcon = ({ active }: { active: boolean }) => {
+  return (
+    <>
+      {active ? (
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M22 6V8.42C22 10 21 11 19.42 11H16V4.01C16 2.9 16.91 2 18.02 2C19.11 2.01 20.11 2.45 20.83 3.17C21.55 3.9 22 4.9 22 6Z"
+            fill="#0CAC67"
+          />
+          <path
+            opacity="0.4"
+            d="M2 7V21C2 21.83 2.94001 22.3 3.60001 21.8L5.31 20.52C5.71 20.22 6.27 20.26 6.63 20.62L8.28999 22.29C8.67999 22.68 9.32001 22.68 9.71001 22.29L11.39 20.61C11.74 20.26 12.3 20.22 12.69 20.52L14.4 21.8C15.06 22.29 16 21.82 16 21V4C16 2.9 16.9 2 18 2H7H6C3 2 2 3.79 2 6V7Z"
+            fill="#A4E0C6"
+          />
+          <path
+            d="M12 9.75H6C5.59 9.75 5.25 9.41 5.25 9C5.25 8.59 5.59 8.25 6 8.25H12C12.41 8.25 12.75 8.59 12.75 9C12.75 9.41 12.41 9.75 12 9.75Z"
+            fill="#0CAC67"
+          />
+          <path
+            d="M11.25 13.75H6.75C6.34 13.75 6 13.41 6 13C6 12.59 6.34 12.25 6.75 12.25H11.25C11.66 12.25 12 12.59 12 13C12 13.41 11.66 13.75 11.25 13.75Z"
+            fill="#0CAC67"
+          />
+        </svg>
+      ) : (
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M22 6V8.42C22 10 21 11 19.42 11H16V4.01C16 2.9 16.91 2 18.02 2C19.11 2.01 20.11 2.45 20.83 3.17C21.55 3.9 22 4.9 22 6Z"
+            fill="#818181"
+          />
+          <path
+            opacity="0.4"
+            d="M2 7V21C2 21.83 2.94001 22.3 3.60001 21.8L5.31 20.52C5.71 20.22 6.27 20.26 6.63 20.62L8.28999 22.29C8.67999 22.68 9.32001 22.68 9.71001 22.29L11.39 20.61C11.74 20.26 12.3 20.22 12.69 20.52L14.4 21.8C15.06 22.29 16 21.82 16 21V4C16 2.9 16.9 2 18 2H7H6C3 2 2 3.79 2 6V7Z"
+            fill="#818181"
+          />
+          <path
+            d="M12 9.75H6C5.59 9.75 5.25 9.41 5.25 9C5.25 8.59 5.59 8.25 6 8.25H12C12.41 8.25 12.75 8.59 12.75 9C12.75 9.41 12.41 9.75 12 9.75Z"
+            fill="#818181"
+          />
+          <path
+            d="M11.25 13.75H6.75C6.34 13.75 6 13.41 6 13C6 12.59 6.34 12.25 6.75 12.25H11.25C11.66 12.25 12 12.59 12 13C12 13.41 11.66 13.75 11.25 13.75Z"
+            fill="#818181"
+          />
+        </svg>
+      )}
+    </>
+  );
+};
+
+export default CheckIcon;
diff --git a/app/class-reservation/ReservationNav/CompletionIcon.tsx b/app/class-reservation/ReservationNav/CompletionIcon.tsx
@@ -0,0 +1,26 @@
+const CompletionIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.74 3.6499H8.26004C5.79004 3.6499 3.79004 5.6599 3.79004 8.1199V17.5299C3.79004 19.9899 5.80004 21.9999 8.26004 21.9999H16.73C19.2 21.9999 21.2 19.9899 21.2 17.5299V8.1199C21.21 5.6499 19.2 3.6499 16.74 3.6499Z"
+        fill="#BBE8D4"
+      />
+      <path
+        d="M14.8498 2H10.1498C9.10977 2 8.25977 2.84 8.25977 3.88V4.82C8.25977 5.86 9.09977 6.7 10.1398 6.7H14.8498C15.8898 6.7 16.7298 5.86 16.7298 4.82V3.88C16.7398 2.84 15.8898 2 14.8498 2Z"
+        fill="#0CAC67"
+      />
+      <path
+        d="M11.31 16.9501C11.12 16.9501 10.93 16.8801 10.78 16.7301L9.28 15.2301C8.99 14.9401 8.99 14.4601 9.28 14.1701C9.57 13.8801 10.05 13.8801 10.34 14.1701L11.31 15.1401L14.78 11.6701C15.07 11.3801 15.55 11.3801 15.84 11.6701C16.13 11.9601 16.13 12.4401 15.84 12.7301L11.84 16.7301C11.7 16.8801 11.5 16.9501 11.31 16.9501Z"
+        fill="#0CAC67"
+      />
+    </svg>
+  );
+};
+
+export default CompletionIcon;
diff --git a/app/class-reservation/ReservationNav/DoneIcon.tsx b/app/class-reservation/ReservationNav/DoneIcon.tsx
@@ -0,0 +1,23 @@
+const DoneIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="vuesax/bold/tick-circle">
+        <g id="tick-circle">
+          <path
+            id="Vector"
+            d="M12.5 2C6.99 2 2.5 6.49 2.5 12C2.5 17.51 6.99 22 12.5 22C18.01 22 22.5 17.51 22.5 12C22.5 6.49 18.01 2 12.5 2ZM17.28 9.7L11.61 15.37C11.47 15.51 11.28 15.59 11.08 15.59C10.88 15.59 10.69 15.51 10.55 15.37L7.72 12.54C7.43 12.25 7.43 11.77 7.72 11.48C8.01 11.19 8.49 11.19 8.78 11.48L11.08 13.78L16.22 8.64C16.51 8.35 16.99 8.35 17.28 8.64C17.57 8.93 17.57 9.4 17.28 9.7Z"
+            fill="white"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default DoneIcon;
diff --git a/app/class-reservation/ReservationNav/RegisterIcon.tsx b/app/class-reservation/ReservationNav/RegisterIcon.tsx
@@ -0,0 +1,52 @@
+const RegisterIcon = ({ active }: { active: boolean }) => {
+  return (
+    <>
+      {active ? (
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18 13C17.06 13 16.19 13.33 15.5 13.88C14.58 14.61 14 15.74 14 17C14 17.75 14.21 18.46 14.58 19.06C15.27 20.22 16.54 21 18 21C19.01 21 19.93 20.63 20.63 20C20.94 19.74 21.21 19.42 21.42 19.06C21.79 18.46 22 17.75 22 17C22 14.79 20.21 13 18 13ZM20.07 16.57L17.94 18.54C17.8 18.67 17.61 18.74 17.43 18.74C17.24 18.74 17.05 18.67 16.9 18.52L15.91 17.53C15.62 17.24 15.62 16.76 15.91 16.47C16.2 16.18 16.68 16.18 16.97 16.47L17.45 16.95L19.05 15.47C19.35 15.19 19.83 15.21 20.11 15.51C20.39 15.81 20.37 16.28 20.07 16.57Z"
+            fill="#0CAC67"
+          />
+          <path
+            d="M21.0901 21.5C21.0901 21.78 20.8701 22 20.5901 22H3.41016C3.13016 22 2.91016 21.78 2.91016 21.5C2.91016 17.36 6.99015 14 12.0002 14C13.0302 14 14.0302 14.14 14.9502 14.41C14.3602 15.11 14.0002 16.02 14.0002 17C14.0002 17.75 14.2101 18.46 14.5801 19.06C14.7801 19.4 15.0401 19.71 15.3401 19.97C16.0401 20.61 16.9702 21 18.0002 21C19.1202 21 20.1302 20.54 20.8502 19.8C21.0102 20.34 21.0901 20.91 21.0901 21.5Z"
+            fill="#BBE8D4"
+          />
+          <path
+            d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z"
+            fill="#0CAC67"
+          />
+        </svg>
+      ) : (
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18 13C17.06 13 16.19 13.33 15.5 13.88C14.58 14.61 14 15.74 14 17C14 17.75 14.21 18.46 14.58 19.06C15.27 20.22 16.54 21 18 21C19.01 21 19.93 20.63 20.63 20C20.94 19.74 21.21 19.42 21.42 19.06C21.79 18.46 22 17.75 22 17C22 14.79 20.21 13 18 13ZM20.07 16.57L17.94 18.54C17.8 18.67 17.61 18.74 17.43 18.74C17.24 18.74 17.05 18.67 16.9 18.52L15.91 17.53C15.62 17.24 15.62 16.76 15.91 16.47C16.2 16.18 16.68 16.18 16.97 16.47L17.45 16.95L19.05 15.47C19.35 15.19 19.83 15.21 20.11 15.51C20.39 15.81 20.37 16.28 20.07 16.57Z"
+            fill="#818181"
+          />
+          <path
+            opacity="0.4"
+            d="M21.0901 21.5C21.0901 21.78 20.8701 22 20.5901 22H3.41016C3.13016 22 2.91016 21.78 2.91016 21.5C2.91016 17.36 6.99015 14 12.0002 14C13.0302 14 14.0302 14.14 14.9502 14.41C14.3602 15.11 14.0002 16.02 14.0002 17C14.0002 17.75 14.2101 18.46 14.5801 19.06C14.7801 19.4 15.0401 19.71 15.3401 19.97C16.0401 20.61 16.9702 21 18.0002 21C19.1202 21 20.1302 20.54 20.8502 19.8C21.0102 20.34 21.0901 20.91 21.0901 21.5Z"
+            fill="#818181"
+          />
+          <path
+            d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z"
+            fill="#818181"
+          />
+        </svg>
+      )}
+    </>
+  );
+};
+
+export default RegisterIcon;
diff --git a/app/class-reservation/ReservationNav/ReservationStep.tsx b/app/class-reservation/ReservationNav/ReservationStep.tsx
@@ -0,0 +1,46 @@
+import CheckIcon from "./CheckIcon";
+import CompletionIcon from "./CompletionIcon";
+import DoneIcon from "./DoneIcon";
+import RegisterIcon from "./RegisterIcon";
+interface Props {
+  step: "register" | "completeInfo" | "check";
+  stepState: "active" | "done" | "pending";
+}
+const ReservationStep = ({ step, stepState }: Props) => {
+  const description =
+    step === "completeInfo"
+      ? "تکمیل اطلاعات"
+      : step === "register"
+      ? "ثبت نام"
+      : "صورتحساب";
+  const iconClass =
+    stepState === "active"
+      ? "border-[#0CAC67] shadow-green border"
+      : stepState === "done"
+      ? "shadow-green bg-[#0CAC67]"
+      : stepState === "pending" && "bg-[#F0F0F0]";
+  const descriptionClass =
+    stepState === "pending" ? "text-[#828282]" : "text-[#0CAC67]";
+  return (
+    <div className="relative flex flex-col items-center gap-[12px]">
+      <div className={`${iconClass} w-fit  p-[11px] rounded-full `}>
+        {stepState === "done" ? (
+          <DoneIcon />
+        ) : step === "completeInfo" ? (
+          <CompletionIcon />
+        ) : step === "register" ? (
+          <RegisterIcon active={stepState === "active"} />
+        ) : (
+          <CheckIcon active={stepState === "active"} />
+        )}
+      </div>
+      <div
+        className={`${descriptionClass} text-nowrap absolute top-[58px] font-bold font-iranSansBold text-[14px]`}
+      >
+        {description}
+      </div>
+    </div>
+  );
+};
+
+export default ReservationStep;
diff --git a/app/class-reservation/ReservationNav/index.tsx b/app/class-reservation/ReservationNav/index.tsx
@@ -0,0 +1,15 @@
+import ReservationStep from "./ReservationStep";
+
+const ReservationNav = () => {
+  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>
+  );
+};
+
+export default ReservationNav;
diff --git a/app/class-reservation/information-completion/page.tsx b/app/class-reservation/information-completion/page.tsx
@@ -1,7 +1,9 @@
-import React from "react";
-
 const InformationCompletion = () => {
-  return <div>InformationCompletion</div>;
+  return (
+    <>
+      <div>InformationCompletion</div>
+    </>
+  );
 };
 
 export default InformationCompletion;
diff --git a/app/class-reservation/layout.tsx b/app/class-reservation/layout.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import CloseButton from "./information-completion/CloseButton";
 import MobileCloseButton from "./information-completion/MobileCloseButton";
+import ReservationNav from "./ReservationNav";
 
 const classReservasionLayout = ({
   children,
@@ -11,6 +12,7 @@ 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">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,28 +1,29 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       fontFamily: {
-        iranSans: 'var(--font-iranSans)',
-        iranSansBold: 'var(--font-iranSansBold)',
-        roboto: 'var(--font-roboto)'
+        iranSans: "var(--font-iranSans)",
+        iranSansBold: "var(--font-iranSansBold)",
+        roboto: "var(--font-roboto)",
       },
       boxShadow: {
-        yellow: '0px 12px 10px 0px rgba(255, 204, 104, 0.10)',
+        yellow: "0px 12px 10px 0px rgba(255, 204, 104, 0.10)",
+        green: " 0px 6px 16px rgba(12, 172, 103, 0.10)",
       },
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;