From cf751df7f4c5ffb06ca56e1642235aa0acb4a1a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 16 Apr 2024 11:10:01 +0200
Subject: [PATCH] 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 | 46 ++++++++++++++++++++++++++++
 src/web/components/layout/row.jsx    | 46 ++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 src/web/components/layout/column.jsx
 create mode 100644 src/web/components/layout/row.jsx

diff --git a/src/web/components/layout/column.jsx b/src/web/components/layout/column.jsx
new file mode 100644
index 0000000000..1b88bdd7b4
--- /dev/null
+++ b/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;
diff --git a/src/web/components/layout/row.jsx b/src/web/components/layout/row.jsx
new file mode 100644
index 0000000000..d19883cef9
--- /dev/null
+++ b/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;