PageLayout fixed to have buttons

src/frontend/src/components/pageLayout/index.tsx

@@ -5,18 +5,23 @@ export default function PageLayout({
   title,
   description,
   children,
+  button,
 }: {
   title: string;
   description: string;
   children: React.ReactNode;
+  button?: React.ReactNode;
 }) {
   return (
     <div className="flex h-screen w-full flex-col">
       <Header />
       <div className="flex h-full w-full flex-col justify-between overflow-auto bg-background px-16">
-        <div className="flex w-full flex-col justify-between space-y-0.5 py-8 pb-2">
-          <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
-          <p className="text-muted-foreground">{description}</p>
+        <div className="flex w-full items-center justify-between space-y-0.5 py-8 pb-2">
+          <div className="flex w-full flex-col">
+            <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <div className="flex-shrink-0">{button && button}</div>
         </div>
         <Separator className="my-6 flex" />
         {children}

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -43,7 +43,7 @@ export default function StoreApiKeyModal({
 
   return (
     <BaseModal size="small-h-full" open={open && !disabled} setOpen={setOpen}>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={
           (hasApiKey && !validApiKey

src/frontend/src/pages/StorePage/index.tsx

@@ -7,7 +7,9 @@ import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
 import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
+
 import {
   Select,
   SelectContent,
@@ -20,6 +22,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { StoreContext } from "../../contexts/storeContext";
 import { getStoreComponents, getStoreTags } from "../../controllers/API";
+import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
 export default function StorePage(): JSX.Element {
@@ -198,21 +201,25 @@ export default function StorePage(): JSX.Element {
     <PageLayout
       title="Langflow Store"
       description="Search flows and components from the community."
-      /*       button={{StoreApiKeyModal && (
-        <StoreApiKeyModal disabled={loading}>
-          <Button
-            disabled={loading}
-            className={cn(
-              `${!validApiKey ? "animate-pulse border-error" : ""}`,
-              loading ? "cursor-not-allowed" : ""
-            )}
-            variant="primary"
-          >
-            <IconComponent name="Key" className="mr-2 w-4" />
-            API Key
-          </Button>
-        </StoreApiKeyModal>
-      )}} */
+      button={
+        <>
+          {StoreApiKeyModal && (
+            <StoreApiKeyModal disabled={loading}>
+              <Button
+                disabled={loading}
+                className={cn(
+                  `${!validApiKey ? "animate-pulse border-error" : ""}`,
+                  loading ? "cursor-not-allowed" : ""
+                )}
+                variant="primary"
+              >
+                <IconComponent name="Key" className="mr-2 w-4" />
+                API Key
+              </Button>
+            </StoreApiKeyModal>
+          )}
+        </>
+      }
     >
       <div className="flex h-full w-full flex-col justify-between">
         <div className="flex w-full flex-col gap-4 p-0">