From 0b6bb5c5412c2d29bf0fcf86b6f0966565bf527c Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 29 Dec 2021 11:45:05 -0500
Subject: [PATCH] Update layout components

---
 src/common/ButtonGroup.tsx | 22 ++++++++++++++++++++++
 src/common/Flex.tsx        | 13 ++++---------
 2 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 src/common/ButtonGroup.tsx

diff --git a/src/common/ButtonGroup.tsx b/src/common/ButtonGroup.tsx
new file mode 100644
index 00000000..033bb1fc
--- /dev/null
+++ b/src/common/ButtonGroup.tsx
@@ -0,0 +1,22 @@
+import { FC, useMemo } from 'react';
+import { Base, BaseProps } from './Base';
+
+export interface ButtonGroupProps extends BaseProps<HTMLDivElement>
+{
+}
+
+export const ButtonGroup: FC<ButtonGroupProps> = props =>
+{
+    const { classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'btn-group' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return <Base classNames={ getClassNames } { ...rest } />;
+}
diff --git a/src/common/Flex.tsx b/src/common/Flex.tsx
index 617ca4ff..8b0995ca 100644
--- a/src/common/Flex.tsx
+++ b/src/common/Flex.tsx
@@ -44,16 +44,11 @@ export const Flex: FC<FlexProps> = props =>
 
         if(gap) newClassNames.push('gap-' + gap);
 
-        if(center)
-        {
-            newClassNames.push('align-items-center', 'justify-content-center');
-        }
-        else
-        {
-            if(alignItems) newClassNames.push('align-items-' + alignItems);
+        if(alignItems) newClassNames.push('align-items-' + alignItems);
 
-            if(justifyContent) newClassNames.push('justify-content-' + justifyContent);
-        }
+        if(justifyContent) newClassNames.push('justify-content-' + justifyContent);
+
+        if(!alignItems && !justifyContent && center) newClassNames.push('align-items-center', 'justify-content-center');
 
         if(classNames.length) newClassNames.push(...classNames);