Function DebuggerControls

frontend/src/components/debugger/debugger-code.tsx:153–228

({ onSubmit, onClear })

  onSubmit: (code: string) => void;
  onClear?: () => void;
}> = ({ onSubmit, onClear }) => {
  const buttonClasses = cn(
    "m-0 w-9 h-8 bg-(--slate-2) text-(--slate-11) hover:text-(--blue-11) rounded-none hover:bg-(--sky-3) hover:border-(--blue-8)",
    "first:rounded-l-lg first:border-l border-t border-b hover:border",
    "last:rounded-r-lg last:border-r",
  );
  const iconClasses = "w-5 h-5";

  return (
    <div className="flex">
      <Tooltip content="Next line">
        <Button
          variant="text"
          size="icon"
          data-testid="debugger-next-button"
          className={buttonClasses}
          onClick={() => onSubmit("n")}
        >
          <SkipForwardIcon fontSize={36} className={iconClasses} />
        </Button>
      </Tooltip>
      <Tooltip content="Continue execution">
        <Button
          variant="text"
          size="icon"
          data-testid="debugger-continue-button"
          onClick={() => onSubmit("c")}
          className={cn(
            buttonClasses,
            "text-(--grass-11) hover:text-(--grass-11) hover:bg-(--grass-3) hover:border-(--grass-8)",
          )}
        >
          <PlayIcon fontSize={36} className={iconClasses} />
        </Button>
      </Tooltip>
      <Tooltip content="Print stack trace">
        <Button
          variant="text"
          size="icon"
          data-testid="debugger-stack-button"
          className={buttonClasses}
          onClick={() => onSubmit("bt")}
        >
          <LayersIcon fontSize={36} className={iconClasses} />
        </Button>
      </Tooltip>
      <Tooltip content="Help">
        <Button
          variant="text"
          size="icon"
          data-testid="debugger-help-button"
          className={buttonClasses}
          onClick={() => onSubmit("help")}
        >
          <HelpCircleIcon fontSize={36} className={iconClasses} />
        </Button>
      </Tooltip>
      {onClear && (