svg-layout-designer-react/src/Components/History/History.tsx

import * as React from 'react';
import { IHistoryState } from '../../App';

interface IHistoryProps {
  history: IHistoryState[],
  historyCurrentStep: number,
  isOpen: boolean,
  onClick: () => void,
  jumpTo: (move: number) => void
}

export class History extends React.Component<IHistoryProps> {
  public render() {
    const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';

    const states = this.props.history.map((step, move) => {
      const desc = move
        ? `Go to modification n°${move}`
        : 'Go to the beginning';

      const isCurrent = move === this.props.historyCurrentStep;

      const selectedClass = isCurrent
        ? 'bg-blue-500 hover:bg-blue-600'
        : 'bg-slate-500 hover:bg-slate-700';

      const isCurrentText = isCurrent
        ? ' (current)'
        : '';
      return (

        <button
          key={move}
          onClick={() => this.props.jumpTo(move)}
          className={
            `w-full elements-sidebar-row whitespace-pre 
            text-left text-sm font-medium transition-all ${selectedClass}`
          }
        >
          {desc}{isCurrentText}
        </button>
      );
    });

    // recent first
    states.reverse();

    return (
      <div className={`fixed flex flex-col bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
        <button className='close-button bg-slate-500 hover:bg-slate-700 justify-start' onClick={this.props.onClick}>
          &times; Close
        </button>
        <div className='bg-slate-600 sidebar-row'>
          History
        </div>
        <div className='overflow-y-auto overflow-x-hidden text-slate-300 flex-grow divide-y divide-solid divide-slate-600'>
          { states }
        </div>
      </div>
    );
  }
}