Add: Add new components for row and column layouts

Both components are based on mantine and flexbox. They are intended to
replace Layout especially in dialogs.

src/web/components/layout/column.jsx

@@ -0,0 +1,46 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {Flex} from '@mantine/core';
+
+import PropTypes from 'web/utils/proptypes';
+
+/**
+ * React component that renders a stack (column) layout
+ *
+ */
+const Column = ({
+  children,
+  gap = 'md',
+  grow,
+  align = 'stretch',
+  wrap,
+  justify = 'flex-start',
+  ...props
+}) => {
+  return (
+    <Flex
+      {...props}
+      direction="column"
+      gap={gap}
+      grow={grow}
+      align={align}
+      wrap={wrap}
+      justify={justify}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+Column.propTypes = {
+  align: PropTypes.string,
+  gap: PropTypes.string,
+  grow: PropTypes.numberOrNumberString,
+  justify: PropTypes.string,
+  wrap: PropTypes.string,
+};
+
+export default Column;

src/web/components/layout/row.jsx

@@ -0,0 +1,46 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {Flex} from '@mantine/core';
+
+import PropTypes from 'web/utils/proptypes';
+
+/**
+ * React component that renders a row layout
+ *
+ */
+const Row = ({
+  children,
+  gap = 'md',
+  grow,
+  align = 'center',
+  wrap,
+  justify,
+  ...props
+}) => {
+  return (
+    <Flex
+      {...props}
+      direction="row"
+      gap={gap}
+      grow={grow}
+      align={align}
+      wrap={wrap}
+      justify={justify}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+Row.propTypes = {
+  align: PropTypes.string,
+  gap: PropTypes.string,
+  grow: PropTypes.numberOrNumberString,
+  justify: PropTypes.string,
+  wrap: PropTypes.string,
+};
+
+export default Row;