Command

"use client";

import * as Command from "@lora-ui/command";

export default function Base() {
  const allUsers = [
    {
      key: "1",
      value: "Phoenix Baker",
      social: "@phoenix",
    },
    {
      key: "2",
      value: "Olivia Rye",
      social: "@olivia",
    },
    {
      key: "3",
      value: "Lana Steiner",
      social: "@lana",
    },
    {
      key: "4",
      value: "Demi Wilkinson",
      social: "@demi",
    },
  ];

  const recent = [
    {
      key: "1",
      value: "Phoenix Baker",
      social: "@phoenix",
    },
    {
      key: "2",
      value: "Olivia Rye",
      social: "@olivia",
    },
  ];

  return (
    <Command.Root className="relative mx-auto w-[328px] overflow-hidden rounded-lg border border-[#eaecf0] bg-[#ffffff] dark:border-[#1f242f] dark:bg-[#0c111d]">
      <Command.Trigger className="relative flex items-center">
        <input
          type="search"
          id="search box"
          placeholder="Search"
          className="flex w-full items-center justify-between whitespace-nowrap border-b border-[#eaecf0] bg-transparent py-4 pl-[44px] pr-4 text-base font-normal text-[#101828] placeholder:text-[#667085] focus:outline-none dark:border-[#1f242f] dark:text-[#f5f5f6] dark:placeholder:text-[#94969c]"
        />
        <label htmlFor="search box" className="absolute left-3">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            className="h-5 w-5"
          >
            <path
              fillRule="evenodd"
              d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z"
              clipRule="evenodd"
            />
          </svg>
        </label>
      </Command.Trigger>
      <Command.Panel>
        <Command.Content className="divide-y divide-[#eaecf0] overflow-y-auto dark:divide-[#1f242f]">
          <Command.Group className="py-4">
            <Command.GroupName className="mx-[18px] text-sm font-medium text-[#475467] dark:text-[#94969c]">
              Recent
            </Command.GroupName>
            {recent.map((option) => {
              return (
                <Command.Option
                  key={option.key}
                  value={option.value + "-" + option.key}
                  className="group list-none bg-transparent px-2 py-[2px]"
                >
                  <div className="flex cursor-pointer items-center gap-2 rounded-lg py-2 pl-[10px] pr-2 hover:bg-[#ffffff] group-aria-[selected=true]:bg-[#f9fafb] dark:hover:bg-[#1f242f] dark:group-aria-[selected=true]:bg-[#1f242f]">
                    <div className="h-6 w-6 rounded-full bg-[#7f56d9] dark:bg-[#7f56d9]" />
                    <span className="text-sm font-medium text-[#101828] dark:text-[#f5f5f6]">
                      {option.value}
                    </span>
                    <span className="text-sm font-medium text-[#475467] dark:text-[#94969c]">
                      {option.social}
                    </span>
                  </div>
                </Command.Option>
              );
            })}
          </Command.Group>
          <Command.Group className="py-4">
            <Command.GroupName className="mx-[18px] text-sm font-medium text-[#475467] dark:text-[#94969c]">
              All users
            </Command.GroupName>
            {allUsers.map((option) => {
              return (
                <Command.Option
                  key={option.key}
                  value={option.value + "-" + option.key}
                  className="group list-none bg-transparent px-2 py-[2px]"
                >
                  <div className="flex cursor-pointer items-center gap-2 rounded-lg py-2 pl-[10px] pr-2 hover:bg-[#ffffff] group-aria-[selected=true]:bg-[#f9fafb] dark:hover:bg-[#1f242f] dark:group-aria-[selected=true]:bg-[#1f242f]">
                    <div className="h-6 w-6 rounded-full bg-[#7f56d9] dark:bg-[#7f56d9]" />
                    <span className="text-sm font-medium text-[#101828] dark:text-[#f5f5f6]">
                      {option.value}
                    </span>
                    <span className="text-sm font-medium text-[#475467] dark:text-[#94969c]">
                      {option.social}
                    </span>
                  </div>
                </Command.Option>
              );
            })}
          </Command.Group>
        </Command.Content>
      </Command.Panel>
    </Command.Root>
  );
}