feat: select view buttons

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Group } from "@mantine/core";
+import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import useIsMobile from "@/hooks/utils/useIsMobile";
+
+const TopToolPanel = () => {
+    const { projects, setSelectedProjectId, selectedProject } =
+        useProjectsContext();
+    const isMobile = useIsMobile();
+
+    if (isMobile) return;
+
+    return (
+        <Group justify={"space-between"}>
+            <ViewSelector />
+            <ProjectSelect
+                data={projects}
+                value={selectedProject}
+                onChange={value => value && setSelectedProjectId(value.id)}
+            />
+        </Group>
+    );
+};
+
+export default TopToolPanel;

src/app/deals/components/desktop/ViewSelectButton/ViewSelectButton.module.css

@@ -0,0 +1,9 @@
+.container {
+    width: 100%;
+    border-radius: var(--mantine-radius-xl);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: var(--mantine-spacing-xs);
+}

src/app/deals/components/desktop/ViewSelectButton/ViewSelectButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { FC, PropsWithChildren } from "react";
+import { Button } from "@mantine/core";
+import { useViewContext, View } from "@/app/deals/contexts/ViewContext";
+import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
+import style from "./ViewSelectButton.module.css";
+
+type Props = {
+    viewName: View;
+};
+
+const ViewSelectButton: FC<PropsWithChildren<Props>> = ({
+    viewName,
+    children,
+}) => {
+    const { view, setView } = useViewContext();
+
+    return (
+        <SmallPageBlock
+            active={view === viewName}
+            style={{ borderRadius: "var(--mantine-radius-xl)" }}>
+            <Button
+                unstyled
+                onClick={() => setView(viewName)}
+                radius="xl"
+                className={style.container}>
+                {children}
+            </Button>
+        </SmallPageBlock>
+    );
+};
+
+export default ViewSelectButton;

src/app/deals/components/desktop/ViewSelector/ViewSelector.tsx

@@ -0,0 +1,25 @@
+import {
+    IconCalendarWeekFilled,
+    IconLayoutDashboard,
+    IconMenu2,
+} from "@tabler/icons-react";
+import { Group } from "@mantine/core";
+import ViewSelectButton from "@/app/deals/components/desktop/ViewSelectButton/ViewSelectButton";
+
+const ViewSelector = () => {
+    return (
+        <Group>
+            <ViewSelectButton viewName={"board"}>
+                <IconLayoutDashboard />
+            </ViewSelectButton>
+            <ViewSelectButton viewName={"table"}>
+                <IconMenu2 />
+            </ViewSelectButton>
+            <ViewSelectButton viewName={"schedule"}>
+                <IconCalendarWeekFilled />
+            </ViewSelectButton>
+        </Group>
+    );
+};
+
+export default ViewSelector;