Function CodeSurferContainer

packs/standalone/src/frame.tsx:24–70

({
  progress,
  dimensions,
  steps,
  tokens,
  types,
  maxLineCount,
  showNumbers
}: ContainerProps)

};

function CodeSurferContainer({
  progress,
  dimensions,
  steps,
  tokens,
  types,
  maxLineCount,
  showNumbers
}: ContainerProps) {
  const prev = steps[Math.floor(progress)];
  const next = steps[Math.floor(progress) + 1];
  const stepPair = React.useMemo(() => new Tuple(prev, next), [prev, next]);

  const titlePair = React.useMemo(() => stepPair.select(step => step.title), [
    stepPair
  ]);
  const subtitlePair = React.useMemo(
    () => stepPair.select(step => step.subtitle),
    [stepPair]
  );

  const t = progress % 1;

  return (
    <div
      className="cs-container"
      style={{
        width: "100%",
        height: dimensions ? dimensions.containerHeight : "100%",
        maxHeight: "100%",
        position: "relative"
      }}
    >
      <CodeSurferContent
        dimensions={dimensions}
        stepPair={stepPair}
        t={t}
        tokens={tokens}
        types={types}
        maxLineCount={maxLineCount}
        showNumbers={showNumbers}
      />
      <Title textPair={titlePair} t={t} />
      <Subtitle textPair={subtitlePair} t={t} />
    </div>
  );
}

function CodeSurferContent({
  dimensions,