components/input/input.tsx

import React, { ChangeEvent, useState } from "react";
import { useUpdateEffect } from "react-use";
import { HiInformationCircle } from "react-icons/hi";

interface Props {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  tooltip?: string;
  label?: string;
  onlyAlphaNumeric?: boolean;
}

export const TextInput: React.FC<Props> = ({
  value: initialValue,
  onChange,
  placeholder,
  tooltip,
  onlyAlphaNumeric = true,
  label,
}) => {
  const [value, setValue] = useState(initialValue);

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;
    // Only allow numbers or strings
    if (onlyAlphaNumeric && /^[0-9a-zA-Z]*$/.test(newValue)) {
      return setValue(newValue);
    }
    setValue(newValue);
  };

  useUpdateEffect(() => onChange(value), [value]);

  return (
    <div className="w-full relative grid grid-cols-1 gap-2.5">
      <div className="flex items-center justify-start gap-2 relative">
        {tooltip && (
          <div className="group cursor-pointer">
            <HiInformationCircle className="text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300 text-xl" />
            <div className="bg-black dark:bg-slate-950/90 z-10 rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
              {tooltip}
            </div>
          </div>
        )}
        <label className="text-slate-500 dark:text-slate-400 text-sm dark:font-medium capitalize">
          {label}:
        </label>
      </div>
      <input
        type="text"
        value={value}
        placeholder={placeholder}
        onChange={handleInputChange}
        className="transition-all text-sm duration-200 truncate w-full h-full px-4 py-3 bg-white dark:bg-slate-950/50 rounded-lg outline-none text-slate-600 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-600 focus:ring-4 focus:ring-indigo-400/20 dark:focus:ring-indigo-600/50 border border-slate-200 dark:border-slate-950/50 focus:border-indigo-300 dark:focus:border-indigo-500"
      />
    </div>
  );
};