Function SelectItem

apps/webapp/app/components/primitives/Select.tsx:415–460

({
  icon,
  checkIcon = <Ariakit.SelectItemCheck className="size-8 flex-none text-white" />,
  shortcut,
  ...props
}: SelectItemProps)

  "group cursor-pointer px-1 pt-1 text-xs text-text-dimmed outline-none last:pb-1";

export function SelectItem({
  icon,
  checkIcon = <Ariakit.SelectItemCheck className="size-8 flex-none text-white" />,
  shortcut,
  ...props
}: SelectItemProps) {
  const combobox = Ariakit.useComboboxContext();
  const render = combobox ? <Ariakit.ComboboxItem render={props.render} /> : undefined;
  const ref = React.useRef<HTMLDivElement>(null);

  useShortcutKeys({
    shortcut: shortcut,
    action: (e) => {
      e.preventDefault();
      e.stopPropagation();
      if (ref.current) {
        ref.current.click();
      }
    },
    disabled: props.disabled,
    enabledOnInputElements: true,
  });

  return (
    <Ariakit.SelectItem
      {...props}
      render={render}
      blurOnHoverEnd={false}
      className={cn(
        selectItemClasses,
        "[--padding-block:0.5rem] sm:[--padding-block:0.25rem]",
        props.className
      )}
      ref={ref}
    >
      <div className="flex h-7 w-full items-center gap-1 rounded-sm px-2 group-data-[active-item=true]:bg-tertiary">
        {icon}
        <div className="grow truncate">{props.children || props.value}</div>
        {checkIcon}
        {shortcut && (
          <ShortcutKey className={cn("size-4 flex-none")} shortcut={shortcut} variant={"small"} />
        )}
      </div>
    </Ariakit.SelectItem>
  );
}

export interface SelectLinkItemProps extends Ariakit.SelectItemProps {
  icon?: React.ReactNode;