feat: <Drawer/> component added in ui-kit

.vscode/settings.json

@@ -3,6 +3,7 @@
         "Auths",
         "firecamp",
         "initialise",
+        "Mantine",
         "plgs",
         "resizer",
         "testid"

platform/firecamp-ui/src/components/drawer/Drawer.tsx

@@ -1,18 +1,90 @@
+import { FC } from 'react';
+import { Drawer as MantineDrawer, DrawerProps, ScrollArea, createStyles } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { Drawer, Button, Group } from '@mantine/core';
 
-function Demo() {
+export interface IDrawer extends DrawerProps { }
-    const [opened, { open, close }] = useDisclosure(false);
+
+const useStyles = createStyles((theme, { title }: IDrawer) => ({
+    content: {
+        borderRadius: '0px',
+        backgroundColor:
+            theme.colorScheme === 'light'
+                ? theme.colors.gray[1]
+                : theme.colors.dark[6],
+        color:
+            theme.colorScheme === 'light'
+                ? theme.colors.dark[5]
+                : theme.colors.gray[4],
+        maxWidth: '48rem',
+        minHeight: '400px',
+    },
+    header: {
+        backgroundColor: 'transparent',
+        color:
+            theme.colorScheme === 'light'
+                ? theme.colors.dark[5]
+                : theme.colors.gray[4],
+        paddingRight: '1rem',
+        paddingTop: '1rem',
+        paddingBottom: !!title ? '1rem' : '0px',
+        ...(!!title
+            ? {
+                borderBottom: `1px solid ${theme.colorScheme === 'light'
+                    ? theme.colors.gray[4]
+                    : theme.colors.dark[4]
+                    }`,
+                backgroundColor:
+                    theme.colorScheme === 'light'
+                        ? theme.colors.gray[1]
+                        : theme.colors.dark[6],
+            }
+            : {}),
+    },
+    body: {
+        paddingLeft: '2rem',
+        paddingRight: '2rem',
+        paddingBottom: '2rem',
+        position: 'relative',
+    },
+}));
+
+const Drawer: FC<IDrawer> = ({
+    id = '',
+    opened = false,
+    classNames = {},
+    onClose = () => { },
+    children = <></>,
+    ...props
+}) => {
+    const { classes, cx, theme } = useStyles({
+        title: props.title,
+        opened,
+        onClose: () => { },
+    });
 
     return (
-        <>
+        <MantineDrawer
-            <Drawer opened={opened} onClose={close} title="Authentication">
+            opened={opened}
-                {/* Drawer content */}
+            onClose={() => onClose()}
-            </Drawer>
+            id={id}
-
+            classNames={{
-            <Group position="center">
+                ...classNames,
-                <Button onClick={open}>Open Drawer</Button>
+                content: cx('invisible-scrollbar', classes.content, classNames.content),
-            </Group>
+                header: cx(classes.header, classNames.header),
-        </>
+                body: cx(classes.body, classNames.body),
+            }}
+            scrollAreaComponent={ScrollArea.Autosize}
+            closeButtonProps={{
+                bg:
+                    theme.colorScheme === 'light'
+                        ? theme.colors.gray[1]
+                        : theme.colors.dark[6],
+            }}
+            {...props}
+        >
+            {children}
+        </MantineDrawer>
     );
-}
+};
+
+export default Drawer;

platform/firecamp-ui/src/ui-kit.ts

@@ -32,6 +32,10 @@ export { default as FileInput } from './components/input/FileInput';
 export { default as Modal } from './components/modal/Modal';
 export type { IModal } from './components/modal/Modal';
 
+// Drawer
+export { default as Drawer } from './components/drawer/Drawer';
+export type { IDrawer } from './components/drawer/Drawer';
+
 export { default as SplitView } from './components/split-view/SplitView';
 
 export { default as Tabs } from './components/tabs/Tabs';