80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
|
|
import { Box, Flex, Group, Stack, Text } from "@mantine/core";
|
|
import Boards from "@/app/deals/components/shared/Boards/Boards";
|
|
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
|
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
|
|
import useIsMobile from "@/hooks/useIsMobile";
|
|
|
|
const Header = () => {
|
|
const {
|
|
projects,
|
|
setSelectedProject,
|
|
selectedProject,
|
|
setIsEditorDrawerOpened: setIsProjectsDrawerOpened,
|
|
} = useProjectsContext();
|
|
const { setIsEditorDrawerOpened } = useBoardsContext();
|
|
const isMobile = useIsMobile();
|
|
const getDesktopHeader = () => {
|
|
return (
|
|
<Flex
|
|
wrap={"nowrap"}
|
|
justify={"space-between"}>
|
|
<Boards />
|
|
<Box
|
|
flex={1}
|
|
style={{ borderBottom: "2px solid gray" }}
|
|
/>
|
|
<Flex
|
|
align={"center"}
|
|
style={{
|
|
borderBottom: "2px solid gray",
|
|
}}>
|
|
<ProjectSelect
|
|
data={projects}
|
|
value={selectedProject}
|
|
onChange={value => value && setSelectedProject(value)}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
const getMobileHeader = () => {
|
|
return (
|
|
<>
|
|
<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>
|
|
<Boards />
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Group
|
|
justify={"flex-end"}
|
|
w={"100%"}>
|
|
<Stack
|
|
gap={0}
|
|
w={"100%"}>
|
|
{isMobile ? getMobileHeader() : getDesktopHeader()}
|
|
</Stack>
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
export default Header;
|