Fixed playground name and collection card

src/frontend/src/components/cardComponent/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import IOModal from "../../modals/IOModal";
+import IOModal from "../../modals/IOModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -27,12 +28,15 @@ export default function CollectionCardComponent({
   authorized = true,
   disabled = false,
   button,
+  onClick,
   onDelete,
   playground,
+  playground,
 }: {
   data: storeComponent;
   authorized?: boolean;
   disabled?: boolean;
+  onClick?: () => void;
   button?: JSX.Element;
   playground?: boolean;
   onDelete?: () => void;
@@ -165,12 +169,13 @@ export default function CollectionCardComponent({
   }
 
   return (
-    <>
     <Card
       className={cn(
         "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
-          disabled ? "pointer-events-none opacity-50" : ""
+        disabled ? "pointer-events-none opacity-50" : "",
+        onClick ? "cursor-pointer" : ""
       )}
+      onClick={onClick}
     >
       <div>
         <CardHeader>
@@ -209,10 +214,7 @@ export default function CollectionCardComponent({
                   )}
                   <ShadTooltip content="Likes">
                     <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent
-                          name="Heart"
-                          className={cn("h-4 w-4 ")}
-                        />
+                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
                       <span data-testid={`likes-${data.name}`}>
                         {likes_count ?? 0}
                       </span>
@@ -220,10 +222,7 @@ export default function CollectionCardComponent({
                   </ShadTooltip>
                   <ShadTooltip content="Downloads">
                     <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent
-                          name="DownloadCloud"
-                          className="h-4 w-4"
-                        />
+                      <IconComponent name="DownloadCloud" className="h-4 w-4" />
                       <span data-testid={`downloads-${data.name}`}>
                         {downloads_count ?? 0}
                       </span>
@@ -378,9 +377,7 @@ export default function CollectionCardComponent({
                     data-testid={`install-${data.name}`}
                   >
                     <IconComponent
-                        name={
-                          loading ? "Loader2" : isStore ? "Download" : "Plus"
-                        }
+                      name={loading ? "Loader2" : isStore ? "Download" : "Plus"}
                       className={cn(
                         loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
                         !authorized ? " text-ring" : ""
@@ -398,9 +395,11 @@ export default function CollectionCardComponent({
                 tabIndex={-1}
                 variant="outline"
                 size="sm"
-                  className="whitespace-nowrap "
+                className="whitespace-nowrap gap-2"
                 data-testid={"playground-flow-button-" + data.id}
-                  onClick={() => {
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
                   setLoadingPlayground(true);
                   if (getFlowById(data.id)) {
                     setCurrentFlowId(data.id);
@@ -416,23 +415,16 @@ export default function CollectionCardComponent({
                 }}
               >
                 {!loadingPlayground ? (
-                    <>
                   <IconComponent
-                        name="ExternalLink"
-                        className="main-page-nav-button select-none"
+                    name="Zap"
+                    className="h-4 w-4 select-none fill-current text-medium-indigo"
                   />
-                      Playground
-                    </>
                 ) : (
-                    <Loading />
+                  <Loading className="h-4 w-4 text-medium-indigo" />
                 )}
+                Playground
               </Button>
             )}
-            </div>
-          </div>
-        </CardFooter>
-      </Card>
-
             {openPlayground && (
               <IOModal
                 cleanOnClose={true}
@@ -442,6 +434,9 @@ export default function CollectionCardComponent({
                 <></>
               </IOModal>
             )}
-    </>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
   );
 }

src/frontend/src/modals/IOModal/index.tsx

@@ -126,9 +126,9 @@ export default function IOModal({
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
       <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
         <div className="flex items-center">
-          <span className="pr-2">Interaction Panel</span>
+          <span className="pr-2">Playground</span>
           <IconComponent
-            name="prompts"
+            name="Zap"
             className="h-6 w-6 pl-1 text-foreground"
             aria-hidden="true"
           />

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -146,30 +146,11 @@ export default function ComponentsComponent({
                     }}
                     key={idx}
                     data={item}
-                    disabled={isLoading}
-                    button={
-                      !is_component ? (
-                        <Link to={"/flow/" + item.id}>
-                          <Button
-                            tabIndex={-1}
-                            variant="outline"
-                            size="sm"
-                            className="whitespace-nowrap "
                     data-testid={
                       "edit-flow-button-" + item.id + "-" + idx
                     }
-                          >
-                            <IconComponent
-                              name="ExternalLink"
-                              className="main-page-nav-button select-none"
-                            />
-                            Edit Flow
-                          </Button>
-                        </Link>
-                      ) : (
-                        <></>
-                      )
-                    }
+                    onClick={!is_component ? () => {navigate("/flow/" + item.id);} : undefined}
+                    disabled={isLoading}
                     playground={!is_component}
                   />
                 ))