.

2024-03-17 20:04:31 +01:00
parent bacfa1b404
commit 38becd42ac
6 changed files with 116 additions and 10 deletions
@@ -0,0 +1,81 @@
+import React from "react";
+
+interface InputCompOneProps {
+  label: string;
+  labelClass: string;
+  placeholder?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
+  name: string;
+  tabIndex?: number;
+  ref?: React.RefObject<HTMLInputElement>;
+  selectValue?: string;
+  parentInputClass?: string;
+  input?: boolean;
+  select?: boolean;
+  inputType?: string;
+  selectOptions?: { value: string; label: string }[];
+  icon?: string | React.ReactNode; // Type for the icon
+}
+
+const InputCompOne: React.FC<InputCompOneProps> = ({
+  label,
+  labeClass,
+  placeholder = "Placeholder",
+  value,
+  onChange,
+  onInput,
+  name,
+  tabIndex,
+  ref,
+  selectValue,
+  input,
+  select,
+  inputType = "text",
+  selectOptions,
+  icon,
+}) => {
+  return (
+    <div>
+      {label && (
+        <label htmlFor={name} className={`flex items-center ${labeClass}`}>
+          {label}
+          {/* <span>*</span> */}
+        </label>
+      )}
+      {input && (
+        <div className="flex items-center">
+          <input
+            type={inputType}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onInput={onInput}
+            name={name}
+            tabIndex={tabIndex}
+            ref={ref}
+          />
+          {icon && (
+            <div className="">
+              {typeof icon === "string" ? <img src={icon} alt="icon" /> : icon}
+            </div>
+          )}
+        </div>
+      )}
+      {select && (
+        <div className="">
+          <select name={name} id="" value={selectValue}>
+            {selectOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InputCompOne;