You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
import { CompoundButton } from './CompoundButton.jsx'
|
|
import { DatePicker } from './DatePicker.jsx'
|
|
import { Icon } from './Icon.jsx'
|
|
|
|
export const Toolbar = ({
|
|
source,
|
|
setSource,
|
|
date,
|
|
setDate,
|
|
showMobileMenu,
|
|
setShowMobileMenu,
|
|
onHelp,
|
|
theme,
|
|
setTheme,
|
|
}) => {
|
|
return (
|
|
<div class="toolbar">
|
|
<div class="mobile">
|
|
<button
|
|
class="flat icon"
|
|
onClick={() => setShowMobileMenu(!showMobileMenu)}
|
|
>
|
|
<Icon name={`${showMobileMenu ? 'close' : 'menu'}`} />
|
|
</button>
|
|
</div>
|
|
<div class="item logo">
|
|
<img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
|
|
</div>
|
|
<div class="option-group">
|
|
<div class="item option">
|
|
<CompoundButton
|
|
options={[
|
|
{ value: 'anno-1', label: 'I' },
|
|
{ value: 'anno-2', label: 'II' },
|
|
{ value: 'anno-3', label: 'III' },
|
|
{ value: 'magistrale', label: 'Magistrale' },
|
|
{ value: 'tutti', label: 'Tutti' },
|
|
]}
|
|
value={source}
|
|
setValue={setSource}
|
|
/>
|
|
</div>
|
|
<div class="item option">
|
|
<CompoundButton
|
|
options={[
|
|
{ value: 'orario', label: 'Orario' },
|
|
{ value: 'lista', label: 'Lista' },
|
|
]}
|
|
value={source}
|
|
setValue={setSource}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="option-group">
|
|
<DatePicker date={date} setDate={setDate} />
|
|
</div>
|
|
<div class="option-group">
|
|
<div class="item option">
|
|
<button class="icon" onClick={() => window.print()}>
|
|
<Icon name="print" />
|
|
</button>
|
|
</div>
|
|
<div class="item option">
|
|
<button
|
|
class="icon"
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
>
|
|
<Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
|
|
</button>
|
|
</div>
|
|
<div class="item option">
|
|
<button class="icon" onClick={onHelp}>
|
|
<Icon name="question_mark" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|