"use client";
import { Combobox } from "@ninjha01/nitro-ui";
import { useEffect, useState } from "react";

const people = [
  {
    id: "people",
    label: "People",
    options: [
      { label: "Wade Cooper", id: "Wade Cooper" },
      { label: "Arlene Mccoy", id: "Arlene Mccoy" },
      { label: "Devon Webb", id: "Devon Webb" },
      { label: "Tom Cook", id: "Tom Cook" },
      { label: "Tanya Fox", id: "Tanya Fox" },
      { label: "Hellen Schmidt", id: "Hellen Schmidt" },
    ],
  },
];

export const Combobox Example = () => {
  const [search, setSearch] = useState("");
  return (
    <Combobox
      sections={people}
      search={search}
      setSearch={setSearch}
      onSelect={(option) => alert(option.label)}
      placeholder="Search"
      listClassName="w-80"
    />
  );
};

"use client";
import { Combobox } from "@ninjha01/nitro-ui";
import { useEffect, useState } from "react";

const people = [
  {
    id: "people",
    label: "People",
    options: [
      { label: "Wade Cooper", id: "Wade Cooper" },
      { label: "Arlene Mccoy", id: "Arlene Mccoy" },
      { label: "Devon Webb", id: "Devon Webb" },
      { label: "Tom Cook", id: "Tom Cook" },
      { label: "Tanya Fox", id: "Tanya Fox" },
      { label: "Hellen Schmidt", id: "Hellen Schmidt" },
    ],
  },
];

export const LoadingExample = () => {
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [_people, setPeople] = useState<typeof people>([]);
  useEffect(function simulateLoading() {
    const timeout = setTimeout(() => {
      setLoading(false);
      setPeople(people);
    }, 5000);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <Combobox
       sections={_people}
       loading={loading}
       search={search}
       setSearch={setSearch}
       loadingText="Searching Census..."
       onSelect={(option) => alert(option.label)}
       placeholder="Search"
       listClassName="w-80"
    />
  );
};