Combobox

import { z } from "zod";
import { AutoForm } from "@vitnode/core/components/form/auto-form";
import { AutoFormCombobox } from "@vitnode/core/components/form/fields/combobox";

const formSchema = z.object({
  type: z.enum(["option-one", "option-two"]),
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: "type",
      component: props => (
        <AutoFormCombobox
          {...props}
          description="Select an option from the list"
          label="Type"
          labels={[
            {
              value: "option-one",
              label: "Option One",
            },
            {
              value: "option-two",
              label: "Option Two",
            },
          ]}
        />
      ),
    },
  ]}
/>

import { z } from "zod";
import { AutoForm } from "@vitnode/core/components/form/auto-form";
import { AutoFormCombobox } from "@vitnode/core/components/form/fields/combobox";
import { fetcherClient } from "@vitnode/core/lib/fetcher-client";

const formSchema = z.object({
  categoryId: z.object({ value: z.string(), label: z.string() }),
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: "categoryId",
      component: props => (
        <AutoFormCombobox
          {...props}
          fetchData={async ({ search }) => {
            const res = await fetcherClient(categoriesModule, {
              path: "/",
              method: "get",
              module: "categories",
              args: {
                query: {
                  search,
                },
              },
            });
            const data = await res.json();

            return data.edges.map(category => ({
              label: category.title,
              value: category.id.toString(),
            }));
          }}
          id="categoryId"
          label="Category"
          placeholder="Select a category"
          searchPlaceholder="Search categories"
        />
      ),
    },
  ]}
/>

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@vitnode/core/components/ui/combobox";

const frameworks = [
  "Next.js",
  "SvelteKit",
  "Nuxt.js",
  "Remix",
  "Astro",
] as const;

export function ComboboxBasic() {
  return (
    <Combobox items={frameworks}>
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {item => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}