Add Placeholder component

src/components/EmptyPlaceholder/EmptyPlaceholder.tsx

@@ -1,5 +1,4 @@
-import { Button } from "../Button/Button";
+import { Placeholder } from "../Placeholder/Placeholder";
-import "./emptyPlaceholder.css";
 import { EmptyPlaceholderIcon } from "./EmptyPlaceholderIcon";
 
 type Props = {
@@ -10,18 +9,11 @@ type Props = {
 
 export function EmptyPlaceholder({ title, message, onRetry }: Props) {
   return (
-    <div className="emptyPlaceholder">
+    <Placeholder
-      <EmptyPlaceholderIcon className="emptyPlaceholder-icon" width={178} />
+      title={title}
-      <b className="emptyPlaceholder-title">{title}</b>
+      message={message}
-      <div className="emptyPlaceholder-message">{message} </div>
+      onRetry={onRetry}
-
+      Icon={<EmptyPlaceholderIcon width={178} />}
-      {onRetry && (
+    ></Placeholder>
-        <Button
-          label="Retry"
-          onClick={onRetry}
-          className="emptyPlaceholder-button"
-        />
-      )}
-    </div>
   );
 }

src/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { Button } from "../Button/Button";
+import "./placeholder.css";
+
+type Props = {
+  title: string;
+  message: string;
+  onRetry?: () => void | Promise<void>;
+  Icon: ReactNode;
+  className?: string;
+};
+
+export function Placeholder({
+  title,
+  message,
+  Icon,
+  className = "",
+  onRetry,
+}: Props) {
+  return (
+    <div className={"placeholder " + className}>
+      <div className="placeholder-icon">{Icon}</div>
+      <b className="placeholder-title">{title}</b>
+      <div className="placeholder-message">{message} </div>
+
+      {onRetry && (
+        <Button
+          label="Retry"
+          onClick={onRetry}
+          className="placeholder-button"
+        />
+      )}
+    </div>
+  );
+}

src/components/Placeholder/placeholder.css

@@ -1,17 +1,17 @@
-.emptyPlaceholder {
+.placeholder {
   text-align: center;
 }
 
-.emptyPlaceholder-icon {
+.placeholder-icon {
   display: block;
   margin: auto auto 0.75rem;
 }
 
-.emptyPlaceholder-title {
+.placeholder-title {
   margin-bottom: 0.25rem;
   display: inline-block;
 }
 
-.emptyPlaceholder-button {
+.placeholder-button {
   margin: 0.75rem auto 0;
 }

src/index.ts

@@ -31,3 +31,4 @@ export { Page } from "./components/Page/Page";
 export { NetworkIndicator } from "./components/NetworkIndicator/NetworkIndicator";
 export { Tooltip } from "./components/Tooltip/Tooltip";
 export { Collapse } from "./components/Collapse/Collapse";
+export { Placeholder } from "./components/Placeholder/Placeholder";