feat / AEB-26 login page

frontend/components/ui/TextInput.tsx

@@ -1,9 +1,76 @@
 import React from 'react'
+import { TextInputProps } from '@/app/types'
+import { HiOutlineEye, HiOutlineEyeOff } from 'react-icons/hi'
+
+const TextInput = ({
+  value,
+  handleChange,
+  label,
+  placeholder,
+  name,
+  type = 'text',
+  className = '',
+  maxLength,
+  min,
+  tooltip,
+  style,
+  isPassword,
+  togglePasswordVisibility,
+  isVisible,
+  error,
+}: TextInputProps) => {
+  const getStylesProps = () => {
+    const baseStyles = 'px-3 py-2 '
+    switch (style) {
+      case 'main':
+        return `p-4`
+      case 'register':
+        return `${baseStyles}`
+      default:
+        return baseStyles
+    }
+  }
 
-const TextInput = () => {
   return (
-    <div>TextInput</div>
+    <div className={className}>
+      {label && (
+        <div className="my-2 flex items-center gap-2">
+          <label className="text-sm font-medium text-gray-500" htmlFor={name}>
+            {label}
+          </label>
+          {tooltip && <div className="tooltip">{tooltip}</div>}
+        </div>
+      )}
+      <div className="relative">
+        <input
+          type={isPassword ? (isVisible ? 'text' : 'password') : type}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value || ''}
+          onChange={handleChange}
+          className={`${getStylesProps()} w-full border bg-[#1B1E28] text-white ${
+            error ? 'border-red-500' : 'border-gray-300'
+          } rounded-xl focus:ring-1 focus:outline-none ${
+            error ? 'focus:ring-red-400' : 'focus:ring-blue-400'
+          }`}
+          autoComplete={name}
+          maxLength={maxLength}
+          min={min}
+        />
+        {isPassword && (
+          <button
+            type="button"
+            onClick={togglePasswordVisibility}
+            className="absolute top-1/2 right-3 -translate-y-1/2 text-white hover:text-gray-700"
+          >
+            {isVisible ? <HiOutlineEye /> : <HiOutlineEyeOff />}
+          </button>
+        )}
+      </div>
+      {error && <div className="mt-1 text-sm text-red-500">{error}</div>}
+    </div>
   )
 }
 
-export default TextInput
+export default TextInput