Function CellOutput

packages/components/src/components/cell-output.tsx:21–177

(props: Props)

};

export function CellOutput(props: Props) {
  const { cell, show, setShow } = props;
  const { getOutput, clearOutput, getTsServerDiagnostics, getTsServerSuggestions } = useCells();

  const [activeTab, setActiveTab] = useState<'stdout' | 'stderr' | 'problems' | 'warnings'>(
    'stdout',
  );

  const fullscreen = props.fullscreen;
  const stdout = getOutput(cell.id, 'stdout') as StdoutOutputType[];
  const stderr = getOutput(cell.id, 'stderr') as StderrOutputType[];
  const diagnostics = getTsServerDiagnostics(cell.id);
  const suggestions = getTsServerSuggestions(cell.id);

  return (
    <div className={cn('font-mono text-sm', fullscreen && !show && 'border-b')}>
      <Tabs
        value={activeTab}
        onValueChange={(value) =>
          setActiveTab(value as 'stdout' | 'stderr' | 'problems' | 'warnings')
        }
        defaultValue="stdout"
      >
        <div
          className={cn(
            'border-t px-3 flex items-center justify-between bg-muted text-tertiary-foreground rounded-b-md',
            show && 'border-b rounded-none',
            fullscreen && 'sticky top-0 border-t',
          )}
        >
          <TabsList className={cn('h-full', !show && '')}>
            <TabsTrigger
              onClick={() => setShow(true)}
              value="stdout"
              className={cn(
                !show &&
                  'border-transparent data-[state=active]:border-transparent data-[state=active]:text-tertiary-foreground mb-0',
              )}
            >
              stdout
            </TabsTrigger>
            <TabsTrigger
              onClick={() => setShow(true)}
              value="stderr"
              className={cn(
                !show &&
                  'border-transparent data-[state=active]:border-transparent data-[state=active]:text-tertiary-foreground mb-0',
              )}
            >
              {stderr.length > 0 ? (
                <>
                  stderr <span className="text-sb-red-30">({stderr.length})</span>
                </>
              ) : (
                'stderr'
              )}
            </TabsTrigger>
            {cell.type === 'code' && cell.language === 'typescript' && (