continuedev/continue

<div
  role="button"
  tabIndex={0}
  aria-expanded={isExpanded}
  className="flex cursor-pointer items-center justify-between gap-3 rounded px-2 py-2 hover:bg-gray-50 hover:bg-opacity-5"
  onClick={() => setIsExpanded(!isExpanded)}
  onKeyDown={(e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      setIsExpanded(!isExpanded);
    }
  }}
>

<Button
  onClick={onAddClick}
  variant="icon"
  size={isSmall ? "sm" : "lg"}
  aria-label={addButtonTooltip}
>
  <PlusIcon className={isSmall ? "h-2.5 w-2.5" : "h-3 w-3"} />
</Button>

<div
  role="button"
  tabIndex={disabled ? -1 : 0}
  onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && handleClick(e as any)}
  className={cn(
    baseClasses,
    interactiveClasses,
    disabledClasses,
    "!my-0 text-left",
    className,
  )}
  onClick={handleClick}
  aria-disabled={disabled}
  data-config-row
>
  <div className="flex flex-col">
    <span className="text-sm font-medium">{title}</span>
    <p className="mt-0.5 text-xs text-gray-500">{description}</p>
  </div>
  <div className="flex items-center gap-4">
    {children}
    {Icon && <Icon className="h-5 w-5 flex-shrink-0 text-gray-400" />}
  </div>
</div>

<span className="ml-2 text-xs italic">
  {invalidMessage}
</span>

const HeadingTag = headingLevel ?? (isSmall ? "h3" : "h2");

<div onClick={(e) => e.stopPropagation()}>
  <ToggleSwitch
    isToggled={isGroupEnabled}
    onToggle={() => dispatch(toggleToolGroupSetting(groupName))}
    text=""
    size={10}
    disabled={allToolsOff}
  />
</div>