Check slug availability

import { useCheckSlugAvailability } from "@sublay/react-js";
import { useState } from "react";

function SlugInput() {
  const checkSlug = useCheckSlugAvailability();
  const [available, setAvailable] = useState<boolean | null>(null);

  const handleBlur = async (slug: string) => {
    const result = await checkSlug({ slug });
    setAvailable(result.available);
  };

  return (
    <div>
      <input onBlur={(e) => handleBlur(e.target.value)} />
      {available === false && <p>Slug is already taken.</p>}
      {available === true && <p>Slug is available!</p>}
    </div>
  );
}