import React , { useState } from 'react' ; import Diff from '../components/StateDiff/Diff' ; import NavBar from '../components/NavBar/NavBar' ; import Metrics from '../components/Metrics/MetricsContainer' ; import Tree from '../components/StateTree/Tree' ; import Network from '../components/AtomNetwork/AtomNetwork' ; import AtomComponentVisualContainer from '../components/ComponentGraph/AtomComponentContainer' ; import Settings from '../components/Settings/SettingsContainer' ; type navTypes = { [ tabName ] : JSX . Element ; } ; const VisualContainer = ( ) => { const nav = { 'State Diff' : < Diff />, 'State Tree' : < Tree />, 'Component Graph' : < AtomComponentVisualContainer />, 'Atom Network' : < Network />, Metrics : < Metrics />, Settings : < Settings />, } ; const tabsList = Object . keys ( nav ) ; const [ tab , setTab ] = useState < string > ( 'State Diff' ) ; return ( < div className = "VisualContainer" > < NavBar setTab = { setTab } tabsList = { tabsList } tab = { tab } / > { nav [ tab ] } < /div>); } ; export default VisualContainer ;