Created a new page for ticket handling as well as submission

src/components/Low/Select.tsx

@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import ReactSelect from "react-select";
+
+interface Option {
+  [key: string]: any;
+  value: string;
+  label: string;
+}
+
+interface Props {
+  defaultValue?: Option;
+  value?: Option | null;
+  options: Option[];
+  disabled?: boolean;
+  placeholder?: string;
+  onChange: (value: Option | null) => void;
+  isClearable?: boolean;
+}
+
+export default function Select({
+  value,
+  defaultValue,
+  options,
+  placeholder,
+  disabled,
+  onChange,
+  isClearable,
+}: Props) {
+  return (
+    <ReactSelect
+      className={clsx(
+        "placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+        disabled &&
+          "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+      )}
+      options={options}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      menuPortalTarget={document?.body}
+      defaultValue={defaultValue}
+      styles={{
+        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+        control: (styles) => ({
+          ...styles,
+          paddingLeft: "4px",
+          border: "none",
+          outline: "none",
+          ":focus": {
+            outline: "none",
+          },
+        }),
+        option: (styles, state) => ({
+          ...styles,
+          backgroundColor: state.isFocused
+            ? "#D5D9F0"
+            : state.isSelected
+              ? "#7872BF"
+              : "white",
+          color: state.isFocused ? "black" : styles.color,
+        }),
+      }}
+      isDisabled={disabled}
+      isClearable={isClearable}
+    />
+  );
+}