"use client";
import { useState } from "react";
import { ModernSimpleInput } from "@/cuicui/common-ui/inputs/modern-simple-input/modern-simple-input";
import { useDebounce } from "@/cuicui/hooks/use-debounce";

export default function PreviewUseDebounce() {
  const [value, setValue] = useState("");
  const delay = 500;
  const debouncedValue = useDebounce(value, delay);
  return (
    <div className="relative space-y-6">
      <ModernSimpleInput
        className="w-72"
        onChange={(e) => setValue(e.target.value)}
        placeholder="Type something..."
        type="text"
        value={value}
      />

      {debouncedValue && (
        <p className=" absolute top-full">
          <span className="font-medium text-neutral-500 tracking-tighter">
            Debounced value:
          </span>
          <br />
          {debouncedValue}
          <br />
        </p>
      )}
      {value !== debouncedValue && (
        <p className="-bottom-6 absolute text-neutral-400 text-xs">
          (Value will update in {delay}ms)
        </p>
      )}
    </div>
  );
}
Use debounce components

Use Debounce
