✨ Add mantine context modals

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -0,0 +1,61 @@
+import { Button, Stack, Text } from '@mantine/core';
+import { IconChevronRight } from '@tabler/icons';
+import Image from 'next/image';
+import React, { ReactNode } from 'react';
+import { useStyles } from './styles';
+
+interface GenericAvailableElementTypeProps {
+  name: string;
+  description?: string;
+  image: string | ReactNode;
+  disabled?: boolean;
+}
+
+export const GenericAvailableElementType = ({
+  name,
+  description,
+  image,
+  disabled,
+}: GenericAvailableElementTypeProps) => {
+  const { classes } = useStyles();
+
+  const Icon = () => {
+    if (React.isValidElement(image)) {
+      return <>{image}</>;
+    }
+
+    return <Image src={image as string} width={24} height={24} />;
+  };
+
+  return (
+    <Button
+      className={classes.styledButton}
+      leftIcon={<Icon />}
+      rightIcon={<IconChevronRight opacity={0.5} />}
+      styles={{
+        root: {
+          height: 'auto',
+          padding: '8px 12px',
+        },
+        inner: {
+          justifyContent: 'left',
+        },
+        label: {
+          justifyContent: 'space-between',
+          width: '100%',
+        },
+      }}
+      disabled={disabled}
+      fullWidth
+    >
+      <Stack spacing={0}>
+        <Text className={classes.elementText}>{name}</Text>
+        {description && (
+          <Text className={classes.elementText} size="xs" color="dimmed">
+            {description}
+          </Text>
+        )}
+      </Stack>
+    </Button>
+  );
+};

src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx

@@ -0,0 +1,21 @@
+import { ActionIcon, Button, Group, Text } from '@mantine/core';
+import { IconArrowNarrowLeft } from '@tabler/icons';
+
+interface SelectorBackArrowProps {
+  onClickBack: () => void;
+}
+
+export const SelectorBackArrow = ({ title, onClickBack }: SelectorBackArrowProps) => {
+  return (
+    <Button
+      leftIcon={<IconArrowNarrowLeft />}
+      onClick={onClickBack}
+      styles={{ inner: { width: 'fit-content' } }}
+      fullWidth
+      variant='default'
+      mb="md"
+    >
+      <Text>See all available elements</Text>
+    </Button>
+  );
+};

src/components/Dashboard/Modals/SelectElement/Components/Shared/styles.tsx

@@ -0,0 +1,28 @@
+import { createStyles } from '@mantine/core';
+
+export const useStyles = createStyles((theme) => ({
+  styledButton: {
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[9] : theme.colors.gray[2],
+    color: theme.colorScheme === 'dark' ? theme.colors.gray[0] : theme.colors.dark[9],
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[3],
+    },
+  },
+  elementButton: {
+    width: '100%',
+    height: '100%',
+    borderRadius: theme.radius.sm
+  },
+  elementStack: {
+    width: '100%',
+  },
+  elementName: {
+    whiteSpace: 'normal',
+    textAlign: 'center',
+    lineHeight: 1.2,
+  },
+  elementText: {
+    lineHeight: 1.2,
+    whiteSpace: 'normal',
+  },
+}));