Implement vertical stepper in create new project with template flow (#14)

* Implement vertical stepper in create project page

* Handle if active step is not found

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/package.json

@@ -22,6 +22,7 @@
     "react-tabs": "^6.0.2",
     "react-timer-hook": "^3.0.7",
     "typescript": "^4.9.5",
+    "vertical-stepper-nav": "^1.0.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

packages/frontend/src/components/Stepper.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StepperNav } from 'vertical-stepper-nav';
+
+const COLOR_COMPLETED = '#059669';
+const COLOR_ACTIVE = '#CFE6FC';
+const COLOR_NOT_STARTED = '#F1F5F9';
+
+interface StepperValue {
+  step: number;
+  route: string;
+  label: string;
+}
+
+interface StepperProps {
+  activeStep: number;
+  stepperValues: StepperValue[];
+}
+
+const Stepper = ({ activeStep, stepperValues }: StepperProps) => {
+  return (
+    <StepperNav
+      steps={stepperValues.map((stepperValue: StepperValue) => {
+        return {
+          stepContent: () => (
+            <div
+              className={`text-sm ${
+                activeStep === stepperValue.step
+                  ? 'text-black font-semibold'
+                  : 'text-gray-600'
+              }`}
+            >
+              {stepperValue.label}
+            </div>
+          ),
+          stepStatusCircleSize: 30,
+          stepStateColor: `${
+            activeStep > stepperValue.step
+              ? COLOR_COMPLETED
+              : activeStep === stepperValue.step
+                ? COLOR_ACTIVE
+                : COLOR_NOT_STARTED
+          }`,
+        };
+      })}
+    />
+  );
+};
+
+export default Stepper;

packages/frontend/src/components/projects/create/template/deploy/CancelDeploymentDialog.tsx

@@ -38,7 +38,7 @@ const CancelDeploymentDialog = ({
         <Button variant="outlined" onClick={handleOpen} className="mr-1">
           <span>Cancel</span>
         </Button>
-        <Link to="/projects/create/template/">
+        <Link to="/projects/create/template">
           <Button variant="gradient" color="red" onClick={handleOpen}>
             <span>Yes, Cancel deployment</span>
           </Button>

packages/frontend/src/pages/projects/create/Template.tsx

@@ -1,7 +1,23 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
+import React, { useMemo } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import Stepper from '../../../components/Stepper';
+
+const STEPPER_VALUES = [
+  { step: 1, route: '/projects/create/template', label: 'Create repository' },
+  { step: 2, route: '/projects/create/template/deploy', label: 'Deploy' },
+];
 
 const CreateWithTemplate = () => {
+  const location = useLocation();
+
+  const activeStep = useMemo(
+    () =>
+      STEPPER_VALUES.find((data) => data.route === location.pathname)?.step ??
+      0,
+    [location.pathname],
+  );
+
   return (
     <div className="flex flex-col items-center">
       <div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6">
@@ -11,8 +27,7 @@ const CreateWithTemplate = () => {
       </div>
       <div className="grid grid-cols-3 w-5/6 p-6">
         <div>
-          <div>1 Create repository</div>
-          <div>2 Deploy</div>
+          <Stepper activeStep={activeStep} stepperValues={STEPPER_VALUES} />
         </div>
         <div className="col-span-2">
           <Outlet />

packages/frontend/src/pages/projects/create/template/Deploy.tsx

@@ -30,7 +30,7 @@ const Deploy = () => {
         </div>
         <div>
           <Button onClick={handleOpen} variant="outlined" size="sm">
-            ^Cancel
+            ^ Cancel
           </Button>
         </div>
         <CancelDeploymentDialog handleOpen={handleOpen} open={open} />