Combobox

"use client";

import * as Combobox from "@lora-ui/combobox";

export default function Base() {
  const options1 = [
    {
      key: "1",
      value: "Apple",
    },
    {
      key: "2",
      value: "Banana",
    },
    {
      key: "3",
      value: "Orange",
    },
    {
      key: "4",
      value: "Mango",
    },
  ];

  const options2 = [
    {
      key: "1",
      value: "Dog",
    },
    {
      key: "2",
      value: "Cat",
    },
    {
      key: "3",
      value: "Cow",
    },
  ];
  return (
    <Combobox.Root className="mx-auto w-[300px]">
      <Combobox.Trigger className="relative">
        <Combobox.Input
          type="text"
          placeholder="Search"
          className="flex h-[44px] w-full items-center justify-between whitespace-nowrap rounded-lg border border-[#eaecf0] bg-transparent pl-[14px] text-base font-normal text-[#101828] placeholder:text-[#667085] dark:border-[#1f242f] dark:text-[#f5f5f6] dark:placeholder:text-[#94969c]"
        />
        <Combobox.Button className="absolute right-[14px] top-1/2 -translate-y-1/2 cursor-pointer">
          <svg
            width="15"
            height="15"
            viewBox="0 0 15 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="text-[#667085] dark:text-[#94969c]"
          >
            <path
              d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
              fill="currentColor"
              fillRule="evenodd"
              clipRule="evenodd"
            />
          </svg>
        </Combobox.Button>
      </Combobox.Trigger>
      <Combobox.Panel>
        <Combobox.Content
          className="max-h-[200px] divide-y divide-[#eaecf0] overflow-y-auto rounded-md border border-[#eaecf0] bg-[#ffffff] px-[6px] shadow dark:divide-[#1f242f] dark:border-[#1f242f] dark:bg-[#0c111d]"
          fallback={
            <div className="flex items-center justify-center p-[10px]">
              Not available
            </div>
          }
        >
          <Combobox.Group className="py-2">
            <Combobox.GroupName className="mx-[6px] py-2 text-sm font-medium text-[#475467] dark:text-[#94969c]">
              Fruits
            </Combobox.GroupName>
            {options1.map((option) => {
              return (
                <Combobox.Option
                  key={option.key}
                  value={option.value}
                  className="relative flex w-full items-center justify-between rounded-md px-3 py-[10px] pl-[8px] pr-[10px] text-base hover:bg-[#f9fafb] aria-[selected=true]:bg-[#f9fafb] dark:hover:bg-[#1f242f] dark:aria-[selected=true]:bg-[#1f242f]"
                >
                  <span className="text-base font-medium text-[#475467] dark:text-[#94969c]">
                    {option.value}
                  </span>
                </Combobox.Option>
              );
            })}
          </Combobox.Group>
          <Combobox.Group className="py-2">
            <Combobox.GroupName className="mx-[6px] py-2 text-sm font-medium text-[#475467] dark:text-[#94969c]">
              Animals
            </Combobox.GroupName>
            {options2.map((option) => {
              return (
                <Combobox.Option
                  key={option.key}
                  value={option.value}
                  className="relative flex w-full items-center justify-between rounded-md px-3 py-[10px] pl-[8px] pr-[10px] text-base hover:bg-[#f9fafb] aria-[selected=true]:bg-[#f9fafb] dark:hover:bg-[#1f242f] dark:aria-[selected=true]:bg-[#1f242f]"
                >
                  <span className="text-base font-medium text-[#475467] dark:text-[#94969c]">
                    {option.value}
                  </span>
                </Combobox.Option>
              );
            })}
          </Combobox.Group>
        </Combobox.Content>
      </Combobox.Panel>
    </Combobox.Root>
  );
}