snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/ui/empty-space.tsx

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// next
+import React from "react";
+import Link from "next/link";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+
+type EmptySpaceProps = {
+  title: string;
+  description: string;
+  children: any;
+  Icon?: any;
+  link?: { text: string; href: string };
+};
+
+function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProps) {
+  return (
+    <>
+      <div className="max-w-lg">
+        {Icon ? (
+          <div className="mb-4">
+            <Icon className="h-14 w-14 text-secondary" />
+          </div>
+        ) : null}
+
+        <h2 className="text-16 font-medium text-primary">{title}</h2>
+        <div className="mt-1 text-13 text-secondary">{description}</div>
+        <ul role="list" className="mt-6 divide-y divide-subtle-1 border-t border-b border-subtle">
+          {children}
+        </ul>
+        {link ? (
+          <div className="mt-6 flex">
+            <Link href={link.href}>
+              <span className="text-13 font-medium text-accent-primary hover:text-accent-primary">
+                {link.text}
+                <span aria-hidden="true"> &rarr;</span>
+              </span>
+            </Link>
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+type EmptySpaceItemProps = {
+  title: string;
+  description?: React.ReactNode | string;
+  Icon: any;
+  action?: () => void;
+  href?: string;
+};
+
+function EmptySpaceItem({ title, description, Icon, action, href }: EmptySpaceItemProps) {
+  let spaceItem = (
+    <div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
+      <div className="flex-shrink-0">
+        <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-accent-primary">
+          <Icon className="h-6 w-6 text-on-color" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1 text-secondary">
+        <div className="text-13 font-medium group-hover:text-primary">{title}</div>
+        {description ? <div className="text-13">{description}</div> : null}
+      </div>
+      <div className="flex-shrink-0 self-center">
+        <ChevronRightOutline className="h-5 w-5 text-secondary group-hover:text-primary" aria-hidden="true" />
+      </div>
+    </div>
+  );
+
+  if (href) {
+    spaceItem = <Link href={href}>{spaceItem}</Link>;
+  }
+
+  return (
+    <>
+      <li className="cursor-pointer" onClick={action} role="button">
+        {spaceItem}
+      </li>
+    </>
+  );
+}
+
+export { EmptySpace, EmptySpaceItem };