buttons, icons, input

2025-10-07 17:05:09 +05:00
parent 9e4bc7b0f8
commit 77fa8ca184
76 changed files with 1314 additions and 6 deletions
@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import LoaderIcon from "../icons/LoaderIcon";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  isLoading?: boolean;
+  errorMessage?: string;
+  isError?: boolean;
+  mask?: string;
+}
+
+function Input({
+  isError,
+  placeholder,
+  errorMessage,
+  isLoading,
+  children,
+  ...props
+}: InputProps) {
+  return (
+    <div className="relative">
+      <input
+        placeholder=""
+        className={clsx(
+          isError
+            ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
+            : "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
+          "peer bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent transition-all inline-block w-full h-[3.889vw] text-m"
+        )}
+        {...props}
+      />
+      {children}
+      {placeholder && (
+        <span className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0">
+          {placeholder + (props.required ? "*" : "")}
+        </span>
+      )}
+      {isError && (
+        <div className="text-red-500 font-medium caption-s 2xl:mt-[0.556vw] mt-2">
+          {errorMessage}
+        </div>
+      )}
+      {isLoading && (
+        <div className="size-[1.389vw] text-[#7B60F3] animate-spin z-1 absolute right-[1.111vw] top-1/2 -translate-y-1/2">
+          <LoaderIcon />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Input;