From 9ed49c902cbfde10f64a322d420dbf64ea36007f Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 24 Feb 2022 13:26:35 -0500
Subject: [PATCH] Add layout components

---
 src/common/HorizontalRule.tsx | 38 +++++++++++++++++++++++++++++++++++
 src/common/index.ts           |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 src/common/HorizontalRule.tsx

diff --git a/src/common/HorizontalRule.tsx b/src/common/HorizontalRule.tsx
new file mode 100644
index 00000000..25aeaf99
--- /dev/null
+++ b/src/common/HorizontalRule.tsx
@@ -0,0 +1,38 @@
+import { CSSProperties, FC, useMemo } from 'react';
+import { Base, BaseProps } from './Base';
+import { ColorVariantType } from './types';
+
+export interface HorizontalRuleProps extends BaseProps<HTMLDivElement>
+{
+    variant?: ColorVariantType;
+    height?: number;
+}
+
+export const HorizontalRule: FC<HorizontalRuleProps> = props =>
+{
+    const { variant = 'black', height = 1, classNames = [], style = {}, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [];
+
+        if(variant) newClassNames.push('bg-' + variant);
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ variant, classNames ]);
+
+    const getStyle = useMemo(() =>
+    {
+        let newStyle: CSSProperties = { display: 'list-item' };
+
+        if(height > 0) newStyle.height = height;
+
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
+        return newStyle;
+    }, [ height, style ]);
+
+    return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
+}
diff --git a/src/common/index.ts b/src/common/index.ts
index c1380a04..763ce538 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -7,6 +7,7 @@ export * from './Flex';
 export * from './FormGroup';
 export * from './Grid';
 export * from './GridContext';
+export * from './HorizontalRule';
 export * from './layout';
 export * from './Text';
 export * from './types';