remove button concern from empty state component

Author: kantord

src/app/catalog/components/empty-state.tsx

@@ -1,49 +1,35 @@
+import type { ReactNode } from "react";
 import { IllustrationEmptyInbox } from "@/components/illustrations/illustration-empty-inbox";
 import { IllustrationNoSearchResults } from "@/components/illustrations/illustration-no-search-results";
-import { Button } from "@/components/ui/button";
 
-interface NoServersEmptyStateProps {
-  variant: "no-servers";
+interface EmptyStateProps {
+  variant: "no-servers" | "no-results";
+  title: string;
+  description: string;
+  actions?: ReactNode;
 }
 
-interface NoResultsEmptyStateProps {
-  variant: "no-results";
-  searchQuery: string;
-  onClearSearch: () => void;
-}
-
-type EmptyStateProps = NoServersEmptyStateProps | NoResultsEmptyStateProps;
-
-export function EmptyState(props: EmptyStateProps) {
-  const isNoResults = props.variant === "no-results";
-
+export function EmptyState({
+  variant,
+  title,
+  description,
+  actions,
+}: EmptyStateProps) {
   return (
     <div className="flex items-center justify-center py-20">
       <div className="flex flex-col items-center text-center gap-4 max-w-md">
-        {isNoResults ? (
+        {variant === "no-results" ? (
           <IllustrationNoSearchResults className="size-32" />
         ) : (
           <IllustrationEmptyInbox className="size-32" />
         )}
 
         <div className="space-y-2">
-          <h2 className="text-xl font-semibold tracking-tight">
-            {isNoResults ? "No results found" : "No servers available"}
-          </h2>
-          <p className="text-muted-foreground">
-            {isNoResults
-              ? `We couldn't find any servers matching "${props.searchQuery}". Try adjusting your search.`
-              : "There are no MCP servers in the catalog yet. Check back later."}
-          </p>
+          <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+          <p className="text-muted-foreground">{description}</p>
         </div>
 
-        {isNoResults && (
-          <div className="flex gap-2 mt-2">
-            <Button variant="outline" onClick={props.onClearSearch}>
-              Clear search
-            </Button>
-          </div>
-        )}
+        {actions}
       </div>
     </div>
   );

src/app/catalog/components/servers.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { useMemo } from "react";
+import { Button } from "@/components/ui/button";
 import type { V0ServerJson } from "@/generated/types.gen";
 import { EmptyState } from "./empty-state";
 import { ServerCard } from "./server-card";
@@ -52,12 +53,23 @@ export function Servers({
       return (
         <EmptyState
           variant="no-results"
-          searchQuery={searchQuery}
-          onClearSearch={onClearSearch}
+          title="No results found"
+          description={`We couldn't find any servers matching "${searchQuery}". Try adjusting your search.`}
+          actions={
+            <Button variant="outline" onClick={onClearSearch}>
+              Clear search
+            </Button>
+          }
         />
       );
     }
-    return <EmptyState variant="no-servers" />;
+    return (
+      <EmptyState
+        variant="no-servers"
+        title="No servers available"
+        description="There are no MCP servers in the catalog yet. Check back later."
+      />
+    );
   }
 
   if (viewMode === "list") {