layout auth page

src/components/input/Input.tsx

@@ -1,142 +1,72 @@
 import React from "react";
 import { cn } from "../../lib/cn";
+import { eyeClosed, eyeOpen } from "../../assets/icons/input";
 
-/* Варианты для скользящего шарика */
-const inputVariants = {
-  size: {
-    sm: "h-[3rem] w-full",
-    md: "h-[3.5rem] w-full",
-    lg: "h-[4rem] w-full",
-  },
-  colors: {
-    default: "text-default-600 bg-default-200 placeholder-default-600",
-    primary: "text-liquid-brightmain bg-liquid-brightmain placeholder-liquid-brightmain",
-    secondary: "text-secondary bg-secondary-100 placeholder-secondary",
-    success: "text-success bg-success-100 placeholder-success",
-    warning: "text-warning bg-warning-100 placeholder-warning",
-    danger: "text-danger bg-danger-100 placeholder-danger",
-  },
-  radius: {
-    none: "rounded-none",
-    sm: "rounded-[8px]",
-    md: "rounded-[12px]",
-    lg: "rounded-[16px]",
-    full: "rounded-full",
-  },
-  colorsHovered: {
-    default: "focus:bg-default-200 hover:bg-default-300",
-    primary: "focus:bg-liquid-brightmain hover:bg-liquid-brightmain",
-    secondary: "focus:bg-secondary-100 hover:bg-secondary-200",
-    success: "focus:bg-success-100 hover:bg-success-200",
-    warning: "focus:bg-warning-100 hover:bg-warning-200",
-    danger: "focus:bg-danger-100 hover:bg-danger-200",
-  },
-  label: {
-    default: "text-default-600",
-    primary: "text-liquid-brightmain",
-    secondary: "text-secondary",
-    success: "text-success",
-    warning: "text-warning",
-    danger: "text-dange",
-  },
-};
-
-interface SwitchProps {
-  size?: "sm" | "md" | "lg";
-  radius?: "sm" | "md" | "lg" | "none" | "full";
+interface inputProps {
+  type: "text" | "email" | "password" | "first_name";
+  error?: string;
   disabled?: boolean;
-  placeholder?: string;
-  type?: "text" | "email" | "password" | "first_name";
-  color?:
-    | "default"
-    | "primary"
-    | "secondary"
-    | "success"
-    | "warning"
-    | "danger";
-  id?: string;
   required?: boolean;
   label?: string;
-  labelType?: "none" | "in" | "out" | "left" | "in-fixed" | "out-fixed";
-  variant?: "flat" | "faded" | "bordered" | "underlined";
+  placeholder?: string;
   className?: string;
-  defaultState?: string;
   onChange: (state: string) => void;
+  defaultState?: string;
 }
 
-export const Input: React.FC<SwitchProps> = ({
-  size = "sm",
-  // radius = "md",
+export const Input: React.FC<inputProps> = ({
   type = "text",
-  id = "",
+  error = "",
   disabled = false,
   required = false,
-  // color = "default",
   label = "",
-  labelType = "in",
   placeholder = "",
-  variant = "bordered",
-  className,
+  className = "",
   onChange,
   defaultState = "",
 }) => {
   const [value, setValue] = React.useState<string>(defaultState);
+  const [visible, setVIsible] = React.useState<boolean>(type != "password");
 
   React.useEffect(() => onChange(value), [value]);
 
-  if (labelType == "in" || labelType == "in-fixed")
-    return (
-      <label
-        className={cn(
-          "grid relative select-none group cursor-text overflow-hidden",
-          disabled && "pointer-events-none opacity-50",
-          className
-        )}
-      >
-        {/* Основной контейнер,  */}
-        <div
+
+  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(
-            "box-border z-10 relative transition-all duration-300 h-fit flex items-center px-3 rounded-[12px] overflow-hidden  ",
-            inputVariants.size[size],
-            variant == "flat" &&
-              "group-hover:bg-default-300 group-focus-within:bg-default-300 bg-default-200",
-            variant == "faded" &&
-              "group-hover:bg-default-300 group-focus-within:bg-default-300 bg-default-200 border-[2px] border-default-300 group-focus-within:border-default group-hover:border-default",
-            variant == "bordered" &&
-              "border-[2px] border-default-300 group-focus-within:border-default group-hover:border-default"
+            "bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light",
+            type == "password" ? "h-[40px]" : "h-[36px]"
           )}
-        >
-          <input
-            id={type == "password" ? type : id}
-            type={type}
-            className={cn(
-              "outline outline-transparent transition-all duration-300 bg-transparent absolute left-0 bottom-0 placeholder-default-500 text-layout-foreground w-full px-3 pt-[10px] h-full",
-              placeholder == "" && value == ""
-                ? "opacity-0 focus:opacity-100"
-                : " [&:-webkit-autofill+*]:text-white"
-            )}
-            value={value}
-            placeholder={placeholder}
-            disabled={disabled}
-            onChange={(e) => {
-              setValue(e.target.value);
-            }}
-          />
+          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 text-default-600 transition-all duration-300 my-[2px]",
-              placeholder == "" && value == "" && labelType != "in-fixed"
-                ? "top-[20%] text-[16px] group-focus-within:top-0 group-focus-within:text-[12px] group-focus-within:text-default-700"
-                : "top-0 text-[12px] text-default-700"
-            )}
-          >
-            {label}
-            {required && <span className="text-danger m-[2px]">*</span>}
-          </div>
-        </div>
-      </label>
-    );
+      <div className={cn("text-liquid-red text-[14px] h-[18px] text-right mt-[5px]",
+        error == "" && "h-0 mt-0"
+      )}>
+        {error}
+      </div>
+
+    </div>
+  );
 
-  return <></>;
 };