import { getActiveClasses } from 'get-active-classes' ; import Svg from 'src/components/Svg/Svg' ; import { sidebarTopConfig , sidebarBottomConfig , sidebarCombinedConfig , } from './sidebarConfig' ; import { useIdeContext } from 'src/helpers/hooks/useIdeContext' ; function TabToggle ( { item , className = '' , active , onChange , onClick } ) { return ( < label className = { getActiveClasses ( { 'bg-ch-pink-800 text-ch-pink-300 bg-opacity-30' : active , 'text-ch-gray-550 cursor-not-allowed' : item . disabled , [ `text-ch-gray-300 p-3 mb-1 flex justify-center ${ className }` ] : true , } ) } > < input name = "sidebar-tabs" type = "radio" disabled = { item . disabled } value = { item . name } onChange = { onChange } onClick = { onClick } className = "sr-only" / > < Svg name = { item . icon } className = "w-8 mx-auto" / > < /label>); } const IdeSideBar = ( ) => { const { state , thunkDispatch } = useIdeContext ( ) ; function onTabClick ( name ) { return function ( ) { thunkDispatch ( { type : 'settingsButtonClicked' , payload : [ name ] } ) ; } ; } const selectedTab = React . useMemo ( ( ) => sidebarCombinedConfig . find ( ( item ) => item . name === state . sideTray [ 0 ] ) , [ state . sideTray ] ) ; return ( < section className = "flex h-full bg-ch-gray-900" > < fieldset className = "h-full flex flex-col justify-between bg-ch-gray-700" > < div > { sidebarTopConfig . map ( ( topItem , i ) => ( < TabToggle item = { topItem } active = { state . sideTray [ 0 ] === topItem . name } onChange = { ( ) => onTabClick ( topItem . name ) } onClick = { onTabClick ( topItem . name ) } key = { 'tab-' + i } / > ) ) } < /div> < div > { sidebarBottomConfig . map ( ( bottomItem , i ) => ( < TabToggle item = { bottomItem } active = { state . sideTray [ 0 ] === bottomItem . name } onChange = { ( ) => onTabClick ( bottomItem . name ) } onClick = { onTabClick ( bottomItem . name ) } key = { 'tab-' + ( sidebarTopConfig . length + i ) } / > ) ) } < /div> < /fieldset> { selectedTab ?. panel && ( < div className = "w-56 bg-ch-gray-900 text-ch-gray-300 border border-ch-pink-800 border-opacity-30" style = { { height : 'calc(100% - 6px)' , margin : '3px' } } > < h2 className = "flex items-center h-9 px-4 bg-ch-pink-800 bg-opacity-30" > { selectedTab . name } < /h2> { selectedTab . panel } < /div>)} < /section>); } ; export default IdeSideBar ;