From 08db282a070244c89216a981029c97012e0e9e5a Mon Sep 17 00:00:00 2001
From: zomars <zomars@me.com>
Date: Wed, 20 Apr 2022 12:00:49 -0600
Subject: [PATCH] Extracts EmptyScreen

---
 packages/types/SVGComponent.d.ts |  1 +
 packages/ui/EmptyScreen.tsx      | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 packages/types/SVGComponent.d.ts
 create mode 100644 packages/ui/EmptyScreen.tsx

diff --git a/packages/types/SVGComponent.d.ts b/packages/types/SVGComponent.d.ts
new file mode 100644
index 0000000000..98f38b8b16
--- /dev/null
+++ b/packages/types/SVGComponent.d.ts
@@ -0,0 +1 @@
+export type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
diff --git a/packages/ui/EmptyScreen.tsx b/packages/ui/EmptyScreen.tsx
new file mode 100644
index 0000000000..15d675a011
--- /dev/null
+++ b/packages/ui/EmptyScreen.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import { SVGComponent } from "@calcom/types/SVGComponent";
+
+export default function EmptyScreen({
+  Icon,
+  headline,
+  description,
+}: {
+  Icon: SVGComponent;
+  headline: string;
+  description: string | React.ReactElement;
+}) {
+  return (
+    <>
+      <div className="min-h-80 my-6 flex flex-col items-center justify-center rounded-sm border border-dashed">
+        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
+          <Icon className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
+        </div>
+        <div className="max-w-[420px] text-center">
+          <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{headline}</h2>
+          <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">{description}</p>
+        </div>
+      </div>
+    </>
+  );
+}