60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
|
import { CancelIcon, FiltersIcon, PlusIcon, RefreshIcon } from '@/icons'
|
||
|
|
import { useState } from 'preact/hooks'
|
||
|
|
import { useDashboardContext } from '../../contexts/DashboardContext'
|
||
|
|
import { DashboardFilters } from './components/DashboardFilters'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
onNewBox: () => void
|
||
|
|
onRefresh: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DashboardHeader = ({ onNewBox, onRefresh }: Props) => {
|
||
|
|
const { verticalMode } = useDashboardContext()
|
||
|
|
const [filtersShown, setFiltersShown] = useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="dashboard-head">
|
||
|
|
{verticalMode && (
|
||
|
|
<>
|
||
|
|
<button onClick={onNewBox}>
|
||
|
|
<PlusIcon />
|
||
|
|
</button>
|
||
|
|
<button onClick={onRefresh}>
|
||
|
|
<RefreshIcon />
|
||
|
|
</button>
|
||
|
|
<div className="filter-button" onClick={() => setFiltersShown(true)}>
|
||
|
|
<FiltersIcon />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{filtersShown && (
|
||
|
|
<div className="filters-panel">
|
||
|
|
<div className="shadow" />
|
||
|
|
<div className="inner">
|
||
|
|
<div
|
||
|
|
className="filter-close"
|
||
|
|
onClick={() => setFiltersShown(false)}
|
||
|
|
>
|
||
|
|
<CancelIcon />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<DashboardFilters />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
{!verticalMode && (
|
||
|
|
<>
|
||
|
|
<button onClick={onNewBox}>Add box</button>
|
||
|
|
<div className="spacer" />
|
||
|
|
<DashboardFilters />
|
||
|
|
<div className="spacer" />
|
||
|
|
<button onClick={onRefresh}>
|
||
|
|
<RefreshIcon /> Refresh all
|
||
|
|
</button>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|