components/input/input.tsx

import React, { ChangeEvent, useState } from "react";
import { useUpdateEffect } from "react-use";

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

export const TextInput: React.FC<Props> = ({
  value: initialValue,
  onChange,
  placeholder,
  subLabel,
  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">
      <label className="text-slate-400 text-sm font-medium capitalize">
        {label}:
      </label>
      {/* {subLabel && <p className="text-slate-600 text-xs">{subLabel}</p>} */}
      <input
        type="text"
        value={value}
        placeholder={placeholder}
        onChange={handleInputChange}
        className="transition-all duration-200 truncate w-full h-full px-4 py-4 bg-slate-950/50 rounded-lg  outline-none text-slate-200 placeholder:text-slate-600 focus:ring-4 focus:ring-indigo-600 focus:ring-opacity-40 border border-slate-950/50 focus:border-indigo-500"
      />
    </div>
  );
};