feat: division between mobile and desktop components, boards for mobile

2025-08-13 09:55:27 +04:00
parent 1a98facd72
commit 838c9640a1
26 changed files with 175 additions and 89 deletions
--- a/src/app/deals/components/shared/Header/Header.tsx
+++ b/src/app/deals/components/shared/Header/Header.tsx
@ -0,0 +1,65 @@
+"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 } =
+        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>
+                <Group justify={"space-between"}>
+                    <Box p={"md"}>
+                        <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;