APP-18 Select Component fix

src/components/SelectComponent/SelectComponent.definitions.ts

@@ -0,0 +1,11 @@
+// definitions
+import type { UseFormRegister } from "react-hook-form";
+
+export interface SelectProps {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  register: UseFormRegister<any>;
+  label: string;
+  options: string[];
+  placeholder: string;
+}

src/components/SelectComponent/SelectComponent.module.css

@@ -0,0 +1,31 @@
+.selectWrapper {
+  position: relative;
+  width: 200px; /* Set the width as needed */
+  display: flex;
+  flex-direction: column;
+}
+
+.selectWrapper label {
+  font-weight: 700;
+  font-size: 14px;
+  margin-bottom: 2px;
+  color: red;
+}
+
+.selectWrapper select {
+  width: 100%;
+  color: #999;
+  border-color: #999;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 2px;
+  font-size: 16px;
+  outline: none;
+  height: fit-content;
+  padding: 4px 8px;
+}
+
+/* Style the placeholder option */
+.selectWrapper select::placeholder {
+  color: #999; /* Adjust placeholder color as needed */
+}

src/components/SelectComponent/SelectComponent.tsx

@@ -0,0 +1,29 @@
+import style from "./SelectComponent.module.css";
+import type { ReactElement } from "react";
+import type { SelectProps } from "./SelectComponent.definitions.tsx";
+
+const Select = ({
+  name,
+  register,
+  label,
+  placeholder,
+  options,
+}: SelectProps): ReactElement => {
+  return (
+    <form>
+      <div className={style.selectWrapper}>
+        {label && <label>{label}</label>}
+        <select {...register(name)}>
+          {placeholder && <option value="">{placeholder}</option>}
+          {options.map((option, index) => (
+            <option key={index} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </div>
+    </form>
+  );
+};
+
+export default Select;

src/components/SelectComponent/tests/ButtonComponent.test.tsx

@@ -0,0 +1,21 @@
+import Select from "../SelectComponent";
+import { render } from "@testing-library/react";
+
+describe("SelectComponent Tests", () => {
+  test("Test Select component to render", () => {
+    const options = ["Option 1", "Option 2", "Option 3"];
+
+    // Mock register function
+    const mockRegister = jest.fn();
+
+    render(
+      <Select
+        name="testSelect"
+        register={mockRegister}
+        label="Select Label"
+        placeholder="Select Placeholder"
+        options={options}
+      />,
+    );
+  });
+});