|
|
|
@ -1,7 +1,16 @@
|
|
|
|
|
import { CompoundButton } from './CompoundButton.jsx'
|
|
|
|
|
import { Icon } from './Icon.jsx'
|
|
|
|
|
|
|
|
|
|
export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp, theme, setTheme }) => {
|
|
|
|
|
export const Toolbar = ({
|
|
|
|
|
mode,
|
|
|
|
|
setMode,
|
|
|
|
|
source,
|
|
|
|
|
setSource,
|
|
|
|
|
onShowMenu,
|
|
|
|
|
onHelp,
|
|
|
|
|
theme,
|
|
|
|
|
setTheme,
|
|
|
|
|
}) => {
|
|
|
|
|
return (
|
|
|
|
|
<div class="toolbar">
|
|
|
|
|
<div class="mobile">
|
|
|
|
@ -53,8 +62,11 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp,
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item option">
|
|
|
|
|
<button class="icon" onClick={() => setTheme(theme==="dark"?"light":"dark")}>
|
|
|
|
|
<Icon name={theme==="dark"?"dark_mode":"light_mode"} />
|
|
|
|
|
<button
|
|
|
|
|
class="icon"
|
|
|
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
|
|
|
>
|
|
|
|
|
<Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item option">
|
|
|
|
|