fix: projects editor to selected project editor, moved attributes editor

2025-03-02 16:49:28 +04:00
parent 17e6c5f23a
commit e151e4bc5e
44 changed files with 476 additions and 512 deletions
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/ProjectEditDrawer.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/ProjectEditDrawer.tsx
@@ -0,0 +1,80 @@
+import { Box, Drawer, rem, Tabs } from "@mantine/core";
+import { IconHexagons, IconSettings, IconSubtask } from "@tabler/icons-react";
+import { ReactNode } from "react";
+import { motion } from "framer-motion";
+import { useProjectsEditorContext } from "../../contexts/ProjectsEditorContext.tsx";
+import General from "./tabs/General/General.tsx";
+import Attributes from "./tabs/Attributes/Attributes.tsx";
+import Modules from "./tabs/Modules/Modules.tsx";
+
+
+const ProjectEditDrawer = () => {
+    const { closeProjectsEditor, openedProjectsEditor } = useProjectsEditorContext();
+
+    const getTabPanel = (value: string, component: ReactNode) => {
+        return (
+            <Tabs.Panel value={value}>
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.2 }}>
+                    <Box
+                        h={"100%"}
+                        w={"100%"}
+                        p={rem(10)}>
+                        {component}
+                    </Box>
+                </motion.div>
+            </Tabs.Panel>
+        );
+    };
+
+    return (
+        <Drawer
+            size={"calc(100vw - 150px)"}
+            position={"right"}
+            onClose={closeProjectsEditor}
+            removeScrollProps={{ allowPinchZoom: true }}
+            withCloseButton={false}
+            opened={openedProjectsEditor}
+            styles={{
+                body: {
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: rem(10),
+                },
+            }}>
+            <Tabs
+                defaultValue={"general"}
+                flex={1}
+                variant={"outline"}
+                orientation={"vertical"}
+                keepMounted={false}>
+                <Tabs.List>
+                    <Tabs.Tab
+                        value={"general"}
+                        leftSection={<IconSettings />}>
+                        Общее
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"modules"}
+                        leftSection={<IconHexagons />}>
+                        Модули
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"attributes"}
+                        leftSection={<IconSubtask />}>
+                        Атрибуты
+                    </Tabs.Tab>
+                </Tabs.List>
+
+                {getTabPanel("general", <General/>)}
+                {getTabPanel("attributes", <Attributes/>)}
+                {getTabPanel("modules", <Modules />)}
+            </Tabs>
+        </Drawer>
+    );
+};
+
+export default ProjectEditDrawer;