create and export RiEmptyPrompt component

Author: dantovska

redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx

@@ -0,0 +1,39 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+interface RiEmptyPromptProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  body?: React.ReactNode
+  title?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+const StyledEmptyPrompt = styled.div`
+  max-width: 36em;
+  text-align: center;
+  padding: 24px;
+  margin: auto;
+`
+
+const Spacer = styled.div`
+  height: ${({ theme }) => theme.core.space.space100};
+`
+
+const RiEmptyPrompt = ({ body, title, icon }: RiEmptyPromptProps) => (
+  <StyledEmptyPrompt>
+    {icon}
+    {title && (
+      <>
+        <Spacer />
+        {title}
+      </>
+    )}
+    {body && (
+      <>
+        <Spacer />
+        {body}
+      </>
+    )}
+  </StyledEmptyPrompt>
+)
+
+export default RiEmptyPrompt

redisinsight/ui/src/components/base/layout/index.ts

@@ -3,7 +3,7 @@ import LoadingContent from './loading-content/LoadingContent'
 import ResizableContainer from './resize/container/ResizableContainer'
 import ResizablePanel from './resize/panel/ResizablePanel'
 import ResizablePanelHandle from './resize/handle/ResizablePanelHandle'
-
+import RiEmptyPrompt from './empty-prompt/RiEmptyPrompt'
 
 export * from './card'
 export * from './horizontal-spacer'
@@ -14,4 +14,5 @@ export {
   ResizablePanel,
   ResizableContainer,
   ResizablePanelHandle,
+  RiEmptyPrompt,
 }