Fixed bug of clicking on IO Modal

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

@@ -166,6 +166,7 @@ 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",
@@ -211,7 +212,10 @@ 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>
@@ -219,7 +223,10 @@ 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>
@@ -286,7 +293,9 @@ export default function CollectionCardComponent({
                   {playground && data?.metadata !== undefined && (
                     <ShadTooltip
                       content={
-                      authorized ? "Playground" : "Please review your API key."
+                        authorized
+                          ? "Playground"
+                          : "Please review your API key."
                       }
                     >
                       <Button
@@ -423,7 +432,9 @@ 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" : ""
@@ -471,6 +482,10 @@ export default function CollectionCardComponent({
                   Playground
                 </Button>
               )}
+            </div>
+          </div>
+        </CardFooter>
+      </Card>
       {openPlayground && (
         <IOModal
           cleanOnClose={true}
@@ -480,9 +495,6 @@ export default function CollectionCardComponent({
           <></>
         </IOModal>
       )}
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
+    </>
   );
 }

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

@@ -128,7 +128,7 @@ export default function IOModal({
         <div className="flex items-center">
           <span className="pr-2">Playground</span>
           <IconComponent
-            name="Zap"
+            name="BotMessageSquareIcon"
             className="h-6 w-6 pl-1 text-foreground"
             aria-hidden="true"
           />