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

import * as React from 'react';
import { ElementsSidebar } from '../ElementsSidebar/ElementsSidebar';
import { Sidebar } from '../Sidebar/Sidebar';
import { History } from '../History/History';
import { AvailableContainer } from '../../Interfaces/AvailableContainer';
import { ContainerModel } from '../../Interfaces/ContainerModel';
import { HistoryState } from "../../Interfaces/HistoryState";
import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
import { FloatingButton } from '../FloatingButton/FloatingButton';
import { Bar } from '../Bar/Bar';

interface IUIProps {
  current: HistoryState
  history: HistoryState[]
  historyCurrentStep: number
  AvailableContainers: AvailableContainer[]
  SelectContainer: (container: ContainerModel) => void
  DeleteContainer: (containerId: string) => void
  OnPropertyChange: (key: string, value: string) => void
  AddContainerToSelectedContainer: (type: string) => void
  AddContainer: (index: number, type: string, parentId: string) => void
  SaveEditorAsJSON: () => void
  SaveEditorAsSVG: () => void
  LoadState: (move: number) => void
}

export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
  const [isElementsSidebarOpen, setIsElementsSidebarOpen] = React.useState(false);
  const [isHistoryOpen, setIsHistoryOpen] = React.useState(false);

  let buttonRightOffsetClasses = 'right-12';
  if (isElementsSidebarOpen || isHistoryOpen) {
    buttonRightOffsetClasses = 'right-72';
  }
  if (isHistoryOpen && isElementsSidebarOpen) {
    buttonRightOffsetClasses = 'right-[544px]';
  }

  return (
    <>
      <Bar
        isSidebarOpen={isSidebarOpen}
        isElementsSidebarOpen={isElementsSidebarOpen}
        isHistoryOpen={isHistoryOpen}
        ToggleElementsSidebar={() => setIsElementsSidebarOpen(!isElementsSidebarOpen)}
        ToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
        ToggleTimeline={() => setIsHistoryOpen(!isHistoryOpen)}
      />

      <Sidebar
        componentOptions={props.AvailableContainers}
        isOpen={isSidebarOpen}
        buttonOnClick={(type: string) => props.AddContainerToSelectedContainer(type)}
      />
      <ElementsSidebar
        MainContainer={props.current.MainContainer}
        SelectedContainer={props.current.SelectedContainer}
        isOpen={isElementsSidebarOpen}
        isHistoryOpen={isHistoryOpen}
        onPropertyChange={props.OnPropertyChange}
        SelectContainer={props.SelectContainer}
        DeleteContainer={props.DeleteContainer}
        AddContainer={props.AddContainer}
      />
      <History
        history={props.history}
        historyCurrentStep={props.historyCurrentStep}
        isOpen={isHistoryOpen}
        jumpTo={props.LoadState}
      />

      <FloatingButton className={`fixed z-10 flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
        <button
          className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
          title='Export as JSON'
          onClick={props.SaveEditorAsJSON}
        >
          <UploadIcon className="heroicon text-white" />
        </button>
        <button
          className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
          title='Export as SVG'
          onClick={props.SaveEditorAsSVG}
        >
          <PhotographIcon className="heroicon text-white" />
        </button>
      </FloatingButton>
    </>
  );
};

export default UI;