feat: richer empty states

package.json

@@ -44,6 +44,7 @@
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^0.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "ts-pattern": "^5.6.2",
     "zod": "^3.24.1",
     "zustand": "^5.0.3"
   },

src/components/empty-state.tsx

@@ -0,0 +1,42 @@
+import { Heading } from "@stacklok/ui-kit";
+import { JSX, ReactNode, SVGProps } from "react";
+import { tv } from "tailwind-variants";
+
+const actionsStyle = tv({
+  base: "mx-auto mt-8",
+  variants: {
+    actions: {
+      1: "",
+      2: "grid grid-cols-2 gap-2",
+    },
+  },
+});
+
+export function Actions({ actions }: { actions: [ReactNode, ReactNode?] }) {
+  return (
+    <div className={actionsStyle({ actions: actions.length })}>{actions}</div>
+  );
+}
+
+export function EmptyState({
+  actions,
+  body,
+  illustration: Illustration,
+  title,
+}: {
+  illustration: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+  title: string;
+  body: string;
+  actions: [ReactNode, ReactNode?] | null;
+}) {
+  return (
+    <div className="max-w-[40rem] mx-auto py-20 flex items-center flex-col text-center text-balance">
+      <Illustration className="size-28" />
+      <Heading level={4} className="font-bold text-gray-900 mb-2">
+        {title}
+      </Heading>
+      <p>{body}</p>
+      {actions ? <Actions actions={actions} /> : null}
+    </div>
+  );
+}