72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
|
|
import { Box, Group, Stack, Text } from "@mantine/core";
|
|
import Boards from "@/app/deals/components/desktop/Boards/Boards";
|
|
import BoardsMobile from "@/app/deals/components/mobile/BoardsMobile/BoardsMobile";
|
|
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
|
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
|
|
import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
|
|
import useIsMobile from "@/hooks/useIsMobile";
|
|
|
|
const Header = () => {
|
|
const {
|
|
projects,
|
|
setSelectedProject,
|
|
selectedProject,
|
|
setIsEditorDrawerOpened: setIsProjectsDrawerOpened,
|
|
} = useProjectsContext();
|
|
const { setIsEditorDrawerOpened } = useBoardsContext();
|
|
const isMobile = useIsMobile();
|
|
|
|
const getDesktopHeader = () => {
|
|
return (
|
|
<Group
|
|
w={"100%"}
|
|
justify={"space-between"}
|
|
wrap={"nowrap"}
|
|
pr={"md"}>
|
|
<Boards />
|
|
<ColorSchemeToggle />
|
|
<ProjectSelect
|
|
data={projects}
|
|
value={selectedProject}
|
|
onChange={value => value && setSelectedProject(value)}
|
|
/>
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
const getMobileHeader = () => {
|
|
return (
|
|
<Stack gap={0}>
|
|
<Group justify={"space-between"}>
|
|
<Box
|
|
p={"md"}
|
|
onClick={() => setIsProjectsDrawerOpened(true)}>
|
|
<IconChevronLeft />
|
|
</Box>
|
|
<Text>{selectedProject?.name}</Text>
|
|
<Box
|
|
p={"md"}
|
|
onClick={() => setIsEditorDrawerOpened(true)}>
|
|
<IconSettings />
|
|
</Box>
|
|
</Group>
|
|
<BoardsMobile />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Group
|
|
justify={"flex-end"}
|
|
w={"100%"}>
|
|
{isMobile ? getMobileHeader() : getDesktopHeader()}
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
export default Header;
|