Data display from the forms

package.json

@@ -12,6 +12,7 @@
     "format": "npx prettier --write ."
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@types/react-select": "^5.0.1",
     "cross-env": "^7.0.3",
     "eslint": "8.44.0",
@@ -20,6 +21,8 @@
     "pre-commit": "^1.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-feather": "^2.0.10",
+    "react-hook-form": "^7.45.4",
     "react-select": "^5.7.4",
     "typescript": "^5.1.6"
   },

src/components/Options/StudentDetailsOptions.tsx

@@ -1,7 +1,7 @@
-export type OptionType = {
-  value: string;
+export interface OptionType {
+  value: string | boolean;
   label: string;
-};
+}
 
 const ProgramOptions: OptionType[] = [
   { value: "Haryana Students", label: "Haryana Students" },
@@ -174,10 +174,10 @@ const TestTakersOptions = [
 ];
 
 export {
-  ProgramOptions,
-  GradeOptions,
+  BatchOptions,
   CourseOptions,
+  GradeOptions,
+  ProgramOptions,
   StreamOptions,
   TestTakersOptions,
-  BatchOptions,
 };

src/components/Options/TestDetailsOptions.tsx

@@ -1,7 +1,4 @@
-export type OptionType = {
-  value: string;
-  label: string;
-};
+import { OptionType } from "./StudentDetailsOptions";
 
 const TestTypeOptions: OptionType[] = [
   { value: "assessment", label: "Assessment" },
@@ -44,9 +41,9 @@ const OptionalLimitOptions: OptionType[] = [
 
 export {
   MarkingSchemeOptions,
+  OptionalLimitOptions,
   TestFormatOptions,
-  TestPurposeOptions,
   TestPlatformOptions,
+  TestPurposeOptions,
   TestTypeOptions,
-  OptionalLimitOptions,
 };

src/components/Options/TimelineOptions.tsx

@@ -1,16 +1,18 @@
-const IsEnabledOptions = [
+import { OptionType } from "./StudentDetailsOptions";
+
+const IsEnabledOptions: OptionType[] = [
   { value: true, label: "ON" },
   { value: false, label: "OFF" },
 ];
 
-const HasSyncedOptions = [
+const HasSyncedOptions: OptionType[] = [
   { value: true, label: "TRUE" },
   { value: false, label: "FALSE" },
 ];
 
-const SessionTypeOptions = [
+const SessionTypeOptions: OptionType[] = [
   { value: "infinite", label: "Infinite" },
   { value: "standard", label: "Standard" },
 ];
 
-export { IsEnabledOptions, HasSyncedOptions, SessionTypeOptions };
+export { HasSyncedOptions, IsEnabledOptions, SessionTypeOptions };

src/components/Stepper.tsx

@@ -1,40 +1,33 @@
-// Stepper.js
-import { Step } from "@/pages/SessionCreator";
-import React from "react";
-
-//Navigates throught different sub-pages by passing the current step and the active step and renders the components based on the sub-page user is presented at
 export default function Stepper({
   steps,
   activeStep,
 }: {
-  steps: Step[];
+  steps: string[];
   activeStep: string;
 }) {
   return (
-    <>
-      <ol className="sm:items-center sm:justify-center w-full space-x-10 flex md:space-x-32 mt-16">
-        {steps.map((step, index) => (
-          <li
-            key={index}
-            className={`flex items-center ${
-              step === activeStep ? "text-black" : "text-gray-400"
-            } space-x-2.5 `}
+    <ol className="flex items-center justify-center w-full space-x-10 md:space-x-32 mt-16">
+      {steps.map((step, index) => (
+        <li
+          key={index}
+          className={`flex items-center ${
+            step === activeStep ? "text-black" : "text-gray-400"
+          } space-x-2.5 `}
+        >
+          <span
+            className={`flex items-center justify-center w-[20px] h-[20px] text-[10px] sm:w-[35px] sm:h-[35px] sm:text-[20px] border rounded-full ${
+              step === activeStep ? "text-white bg-[#A82929]" : ""
+            } shadow-md`}
           >
-            <span
-              className={`flex items-center text-[10px] justify-center w-[20px] h-[20px] sm:w-[35px] sm:h-[35px] sm:text-[20px] border rounded-full shrink-0 ${
-                step === activeStep ? "text-white bg-[#A82929]" : ""
-              } drop-shadow-[0px_4px_4px_rgba(0, 0, 0, 0.25)]`}
-            >
-              {index + 1}
-            </span>
-            <span>
-              <h3 className="font-medium leading-tight text-[12px] sm:text-[20px]">
-                {step}
-              </h3>
-            </span>
-          </li>
-        ))}
-      </ol>
-    </>
+            {index + 1}
+          </span>
+          <span>
+            <h3 className="font-medium leading-tight text-[12px] sm:text-[20px]">
+              {step}
+            </h3>
+          </span>
+        </li>
+      ))}
+    </ol>
   );
 }

src/components/Steps/Form/SelectedField.tsx

@@ -0,0 +1,39 @@
+import styles from "@/styles/Home.module.css";
+import { MyForm, MyFormKey } from "@/types/FormTypes";
+import { OptionType } from "@/types/types";
+import { Control, Controller } from "react-hook-form";
+import Select from "react-select";
+interface SelectFieldProps {
+  control: Control<MyForm, any>;
+  options: OptionType[];
+  name_: MyFormKey;
+  placeholder?: string;
+}
+
+const SelectField = ({
+  control,
+  options,
+  name_,
+  placeholder,
+}: SelectFieldProps) => {
+  return (
+    <Controller
+      name={name_}
+      control={control}
+      render={({ field: { onChange, value, ref } }) => (
+        <Select
+          required
+          placeholder={
+            placeholder ? placeholder : (name_ as string).toUpperCase()
+          }
+          className={styles.custom_input}
+          options={options}
+          value={options.find((c) => c.value === value)}
+          onChange={(val) => onChange(val!.value)}
+        />
+      )}
+    />
+  );
+};
+
+export default SelectField;