use russian cities names for search params

frontend/components/ui/TextInput.tsx

@@ -17,6 +17,7 @@ const TextInput = ({
   isPassword,
   togglePasswordVisibility,
   isVisible,
+  error,
 }: TextInputProps) => {
   const getStylesProps = () => {
     const baseStyles = 'px-3 py-2 '
@@ -33,8 +34,8 @@ const TextInput = ({
   return (
     <div className={className}>
       {label && (
-        <div className="flex items-center gap-2 my-2">
-          <label className="font-medium text-sm text-gray-500" htmlFor={name}>
+        <div className="my-2 flex items-center gap-2">
+          <label className="text-sm font-medium text-gray-500" htmlFor={name}>
             {label}
           </label>
           {tooltip && <Tooltip content={tooltip} />}
@@ -48,7 +49,11 @@ const TextInput = ({
           placeholder={placeholder}
           value={value || ''}
           onChange={handleChange}
-          className={`${getStylesProps()} w-full border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-400 focus:bg-white`}
+          className={`${getStylesProps()} w-full border ${
+            error ? 'border-red-500' : 'border-gray-300'
+          } rounded-xl text-black focus:ring-1 focus:outline-none ${
+            error ? 'focus:ring-red-400' : 'focus:ring-blue-400'
+          } focus:bg-white`}
           autoComplete={name}
           maxLength={maxLength}
         />
@@ -56,12 +61,13 @@ const TextInput = ({
           <button
             type="button"
             onClick={togglePasswordVisibility}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+            className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-700"
           >
             {isVisible ? <HiOutlineEye /> : <HiOutlineEyeOff />}
           </button>
         )}
       </div>
+      {error && <div className="mt-1 text-sm text-red-500">{error}</div>}
     </div>
   )
 }