code editor

src/components/drop-down-list/DropDownList.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+import { eyeClosed, eyeOpen } from "../../assets/icons/input";
+
+interface DwopDownListProps {
+  name?: string;
+  type: "text" | "email" | "password" | "first_name";
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  onChange: (state: string) => void;
+  defaultState?: string;
+  autocomplete?: string;
+}
+
+export const DwopDownList: React.FC<DwopDownListProps> = ({
+  type = "text",
+  error = "",
+//   disabled = false,
+//   required = false,
+  label = "",
+  placeholder = "",
+  className = "",
+  onChange,
+  defaultState = "",
+  name = "",
+  autocomplete="",
+}) => {
+  const [value, setValue] = React.useState<string>(defaultState);
+  const [visible, setVIsible] = React.useState<boolean>(type != "password");
+
+  React.useEffect(() => onChange(value), [value]);
+
+
+  return (
+    <div className={cn(
+      "relative",
+      className
+    )}>
+      <div className={cn("text-[18px] text-liquid-white font-medium h-[23px] mb-[10px] transition-all",
+        label == "" && "h-0 mb-0"
+      )}>
+        {label}
+      </div>
+      <div className="relative">
+        <input
+          className={cn(
+            "bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light",
+            type == "password" ? "h-[40px]" : "h-[36px]"
+          )}
+          name={name}
+          autoComplete={autocomplete}
+          type={type == "password" ? (visible ? "text" : "password") : type}
+          placeholder={placeholder}
+          onChange={(e) => {
+            setValue(e.target.value);
+          }} />
+        {
+          type == "password" &&
+          <img src={visible ? eyeOpen : eyeClosed} className="w-[24px] h-[24px] cursor-pointer right-[16px] top-[8px] absolute" onClick={() => {
+            setVIsible(!visible);
+          }}/>
+        }
+      </div>
+
+      <div className={cn("text-liquid-red text-[14px] h-[18px] text-right mt-[5px]",
+        error == "" && "h-0 mt-0"
+      )}>
+        {error}
+      </div>
+
+    </div>
+  );
+
+};