drop down for code editor

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

@@ -1,78 +1,87 @@
 import React from "react";
 import { cn } from "../../lib/cn";
-import { eyeClosed, eyeOpen } from "../../assets/icons/input";
+import { checkMark, chevroneDropDownList } 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 interface DropDownListItem{
+    text: string;
+    value: string;
 }
 
-export const DwopDownList: React.FC<DwopDownListProps> = ({
-  type = "text",
-  error = "",
-//   disabled = false,
-//   required = false,
-  label = "",
-  placeholder = "",
-  className = "",
-  onChange,
-  defaultState = "",
-  name = "",
-  autocomplete="",
+interface DropDownListProps {
+    disabled?: boolean;
+    className?: string; 
+    onChange: (state: string) => void;
+    defaultState?: DropDownListItem;
+    items: DropDownListItem[];
+}
+
+export const DropDownList: React.FC<DropDownListProps> = ({
+    // disabled = false,
+    className = "",
+    onChange,
+    defaultState,
+    items = [{text: "", value: ""}],
 }) => {
-  const [value, setValue] = React.useState<string>(defaultState);
-  const [visible, setVIsible] = React.useState<boolean>(type != "password");
+    if (items.length == 0)
+        items.push({text: "", value: ""});
 
-  React.useEffect(() => onChange(value), [value]);
+    const [value, setValue] = React.useState<DropDownListItem>(defaultState != undefined ? defaultState : items[0]);
+    const [active, setActive] = React.useState<boolean>(false);
+
+    React.useEffect(() => onChange(value.value), [value]);
+
+    return (
+        <div className={cn(
+            "relative",
+            className
+        )}>
+            <div className={cn(" flex items-center h-[40px] rounded-[10px] bg-liquid-lighter px-[16px] w-[180px]",
+                "text-[18px] font-bold cursor-pointer select-none",
+                "transitin-all active:scale-95 duration-300"   
+            )}
+                onClick={() => setActive(!active)}>
+                {value.text}
+
+            </div>
+
+            <img src={chevroneDropDownList}
+            className={cn(" absolute right-[16px]  h-[24px] w-[24px] top-[8.5px] rotate-0 transition-all duration-300 pointer-events-none",
+                active && " rotate-180"
+            )}/>
 
 
-  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(" absolute rounded-[10px] bg-liquid-lighter w-[180px] left-0 top-[48px] z-50 transition-all duration-300",
+                "grid overflow-hidden",
+                active ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+            )}>
+                <div className=" overflow-hidden p-[8px]">
+                    <div className={cn(
+                        " overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px]",
+                    )}>
 
-      <div className={cn("text-liquid-red text-[14px] h-[18px] text-right mt-[5px]",
-        error == "" && "h-0 mt-0"
-      )}>
-        {error}
-      </div>
+                        {items.map((v, i) =>
+                            <div
+                                key={i}
+                                className={cn(
+                                    "cursor-pointer  h-[36px] relative",
+                                    i + 1 != items.length && "border-b-liquid-light border-b-[1px]",
+                                    "text-[16px] font-medium cursor-pointer select-none flex items-center pl-[8px]",
+                                )}
+                                onClick={() => {
+                                    setValue(v);
+                                    setActive(false);
+                                }}>
+                                {v.text}
 
-    </div>
-  );
+                                {v.text == value.text && 
+                                <img src={checkMark} className=" absolute right-[8px]"/>
+                                }
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 
 };