Suggestions

import {
  IconCalendar,
  IconCode,
  IconPencil,
  IconSearch,
} from "@tabler/icons-react";
import { Suggestions } from "@/components/ui/suggestions";

const items = [
  {
    id: "write",
    label: "Write",
    icon: <IconPencil className="h-3.5 w-3.5" aria-hidden />,
  },
  {
    id: "learn",
    label: "Learn",
    icon: <IconSearch className="h-3.5 w-3.5" aria-hidden />,
  },
  {
    id: "code",
    label: "Code",
    icon: <IconCode className="h-3.5 w-3.5" aria-hidden />,
  },
  {
    id: "calendar",
    label: "From Calendar",
    icon: <IconCalendar className="h-3.5 w-3.5" aria-hidden />,
  },
];

export default function Demo() {
  return (
    <div className="flex h-full w-full items-center justify-center p-8">
      <Suggestions
        items={items}
        onSelect={(item) => console.log(item)}
        className="justify-center"
        itemClassName="h-7 rounded-[6px] px-2 text-sm"
      />
    </div>
  );
}