88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { Box, Drawer, rem, Tabs } from "@mantine/core";
|
||
import { IconHexagons, IconSettings, IconSubtask, IconTags } 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";
|
||
import Tags from "./tabs/Tags/Tags.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.Tab
|
||
value={"tags"}
|
||
leftSection={<IconTags />}>
|
||
Теги
|
||
</Tabs.Tab>
|
||
</Tabs.List>
|
||
|
||
{getTabPanel("general", <General />)}
|
||
{getTabPanel("attributes", <Attributes />)}
|
||
{getTabPanel("modules", <Modules />)}
|
||
{getTabPanel("tags", <Tags />)}
|
||
</Tabs>
|
||
</Drawer>
|
||
);
|
||
};
|
||
|
||
export default ProjectEditDrawer;
|