diff --git a/client/src/assets/pages/_dashboard-page.scss b/client/src/assets/pages/_dashboard-page.scss index 46a1702..d00b546 100644 --- a/client/src/assets/pages/_dashboard-page.scss +++ b/client/src/assets/pages/_dashboard-page.scss @@ -9,6 +9,13 @@ display: flex; align-items: center; margin-left: auto; + flex: 1; + + .dashboard-switch { + flex: 1; + display: flex; + align-items: center; + } .spacer { margin: 0 1rem; diff --git a/client/src/pages/dashboard/components/DashboardHeader/DashboardHeader.tsx b/client/src/pages/dashboard/components/DashboardHeader/DashboardHeader.tsx index 80f29fe..441d1f7 100644 --- a/client/src/pages/dashboard/components/DashboardHeader/DashboardHeader.tsx +++ b/client/src/pages/dashboard/components/DashboardHeader/DashboardHeader.tsx @@ -2,6 +2,7 @@ import { CancelIcon, FiltersIcon, PlusIcon, RefreshIcon } from '@/icons' import { useState } from 'preact/hooks' import { useDashboardContext } from '../../contexts/DashboardContext' import { DashboardFilters } from './components/DashboardFilters' +import { DashboardSwitch } from './components/DashboardSwitch' type Props = { onNewBox: () => void @@ -45,6 +46,7 @@ export const DashboardHeader = ({ onNewBox, onRefresh }: Props) => { )} {!verticalMode && ( <> +
diff --git a/client/src/pages/dashboard/components/DashboardHeader/components/DashboardSwitch.tsx b/client/src/pages/dashboard/components/DashboardHeader/components/DashboardSwitch.tsx new file mode 100644 index 0000000..6dea3a4 --- /dev/null +++ b/client/src/pages/dashboard/components/DashboardHeader/components/DashboardSwitch.tsx @@ -0,0 +1,27 @@ +import { getDashboards } from '@/api/dashboards' +import { PlusIcon } from '@/icons' +import { useState } from 'preact/hooks' +import { useQuery } from 'react-query' + +export const DashboardSwitch = () => { + const [dashboard, setDashboard] = useState() + + const dashboards = useQuery(['/dashboards'], getDashboards) + + return ( +
+ + + +
+ ) +}