From 2f67bb66e7b6d7b4904ebef716d6514f93e31bf1 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 3 Jan 2022 00:56:14 -0500
Subject: [PATCH] Add LayoutImage

---
 src/common/layout/LayoutImage.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/common/layout/LayoutImage.tsx

diff --git a/src/common/layout/LayoutImage.tsx b/src/common/layout/LayoutImage.tsx
new file mode 100644
index 00000000..84fff35b
--- /dev/null
+++ b/src/common/layout/LayoutImage.tsx
@@ -0,0 +1,23 @@
+import { FC, useMemo } from 'react';
+import { Base, BaseProps } from '../Base';
+
+export interface LayoutImageProps extends BaseProps<HTMLDivElement>
+{
+    imageUrl: string;
+}
+
+export const LayoutImage: FC<LayoutImageProps> = props =>
+{
+    const { imageUrl = null, style = null, ...rest } = props;
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        if(imageUrl) newStyle.background = `url(${ imageUrl }) center no-repeat`;
+
+        return newStyle;
+    }, [ style, imageUrl ]);
+
+    return <Base fit style={ getStyle } { ...rest } />;
+}