Move Cell group component to its own file

3 files changed, 40 insertions, 7 deletions

diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index 5a24cfe901..6c6beb6d83 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -49,10 +49,3 @@ export const CellButton = styled(
     );
   }),
 )({});
-
-export const CellButtonGroup = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '20px',
-});
diff --git a/gui/src/renderer/components/cell/Group.tsx b/gui/src/renderer/components/cell/Group.tsx
new file mode 100644
index 0000000000..c167b2d525
--- /dev/null
+++ b/gui/src/renderer/components/cell/Group.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IStyledGroupProps {
+  noMarginBottom?: boolean;
+}
+
+const StyledGroup = styled.div({}, (props: IStyledGroupProps) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: props.noMarginBottom ? '0px' : '20px',
+}));
+
+const StyledCellWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: '1px',
+});
+
+interface IGroupProps extends IStyledGroupProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export function Group(props: IGroupProps) {
+  const children = React.Children.toArray(props.children);
+  return (
+    <StyledGroup noMarginBottom={props.noMarginBottom}>
+      {children.map((child, index) =>
+        index === children.length - 1 ? (
+          child
+        ) : (
+          <StyledCellWrapper key={index}>{child}</StyledCellWrapper>
+        ),
+      )}
+    </StyledGroup>
+  );
+}
diff --git a/gui/src/renderer/components/cell/index.ts b/gui/src/renderer/components/cell/index.ts
index a16cb93097..cc510e5b22 100644
--- a/gui/src/renderer/components/cell/index.ts
+++ b/gui/src/renderer/components/cell/index.ts
@@ -4,3 +4,4 @@ export * from './Footer';
 export * from './Input';
 export * from './Label';
 export * from './Section';
+export * from './Group';