login register comlated

src/shared/ui/field.tsx

@@ -0,0 +1,65 @@
+export function Field({
+  id,
+  label,
+  type = 'text',
+  placeholder,
+  value,
+  name,
+  onChange,
+  error,
+  maxLength,
+  minLength,
+  require = false,
+}: {
+  id: string;
+  label: string;
+  type?: string;
+  placeholder?: string;
+  value: string;
+  name: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+  maxLength?: number;
+  minLength?: number;
+  require?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label
+        htmlFor={id}
+        className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
+      >
+        {label}
+      </label>
+      <input
+        id={id}
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        maxLength={maxLength}
+        minLength={minLength}
+        autoComplete="off"
+        className={`
+          w-full rounded-sm border bg-stone-50 px-3.5 py-2.5
+          font-sans text-[0.95rem] text-stone-900 outline-none
+          placeholder:text-stone-300
+          transition-all duration-150
+          focus:border-stone-400 focus:ring-2 focus:ring-stone-300/30
+          ${
+            error
+              ? 'border-red-400 ring-2 ring-red-200/40'
+              : 'border-stone-200 hover:border-stone-300'
+          }
+        `}
+        required={require}
+      />
+      {error && (
+        <span className="text-[0.7rem] text-red-500 tracking-tight">
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}