88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
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
|