Changed Card component to be more generic

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

@@ -1,13 +1,13 @@
 import { Trash2, ExternalLink } from "lucide-react";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
-import { TabsContext } from "../../../../contexts/tabsContext";
+import { TabsContext } from "../../contexts/tabsContext";
-import { FlowType } from "../../../../types/flow";
+import { FlowType } from "../../types/flow";
-import { gradients } from "../../../../utils";
+import { gradients } from "../../utils";
-import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../../../../components/ui/card";
+import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../ui/card";
-import { Button } from "../../../../components/ui/button";
 
-export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
+
+export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; id: string, onDelete?: () => void, button?: JSX.Element }) => {
   const { removeFlow } = useContext(TabsContext);
 
   return (
@@ -26,13 +26,13 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
               {flow.name}
             </span>
           </div>
+          {onDelete &&
           <button
-            onClick={() => {
+            onClick={onDelete}
-              removeFlow(flow.id);
-            }}
           >
             <Trash2 className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
           </button>
+          }
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
@@ -53,17 +53,10 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
               <span className="text-base">&nbsp;</span>OpenAI+
             </Badge> */}
           </div>
-          <Link to={"/flow/" + id}>
+          {button &&
-            <Button
+            button
-              variant="outline"
+          }
-              size="sm"
+          
-              className="whitespace-nowrap "
-              
-            >
-              <ExternalLink className="w-4 mr-2" />
-              Edit Flow
-            </Button>
-          </Link>
         </div>
       </CardFooter>
     </Card>

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

@@ -1,70 +0,0 @@
-import { GitFork } from "lucide-react";
-import { useContext } from "react";
-import { useNavigate } from "react-router-dom";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { FlowType } from "../../../../types/flow";
-import { gradients } from "../../../../utils";
-import {
-  CardTitle,
-  CardDescription,
-  CardFooter,
-  Card,
-  CardHeader,
-} from "../../../../components/ui/card";
-import { Button } from "../../../../components/ui/button";
-
-export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
-  const { addFlow } = useContext(TabsContext);
-  const navigate = useNavigate();
-
-  return (
-    <Card className="group">
-      <CardHeader>
-        <CardTitle className="flex justify-between items-start">
-          <div className="flex gap-4 items-center">
-            <span
-              className={
-                "rounded-full w-8 h-8 flex items-center justify-center text-2xl " +
-                gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length]
-              }
-            ></span>
-            <span className="flex-1 truncate-doubleline">{flow.name}</span>
-          </div>
-        </CardTitle>
-        <CardDescription className="pt-2 pb-2">
-          <div className="truncate-doubleline">
-            {flow.description}
-            {/* {flow.description} */}
-          </div>
-        </CardDescription>
-      </CardHeader>
-
-      <CardFooter>
-        <div className="flex gap-2 w-full justify-between items-end">
-          <div className="flex flex-wrap gap-2">
-            {/* <Badge variant="secondary">Agent</Badge>
-            <Badge variant="secondary">
-              <div className="w-3">
-                <OpenAiIcon />
-              </div>
-              <span className="text-base">&nbsp;</span>OpenAI+
-            </Badge> */}
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            className="whitespace-nowrap "
-            onClick={() => {
-              addFlow(flow, true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}
-          >
-            <GitFork className="w-4 mr-2" />
-            Fork Example
-          </Button>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-};

src/frontend/src/pages/CommunityPage/index.tsx

@@ -18,6 +18,7 @@ import {
   Plus,
   Home,
   Users2,
+  GitFork,
 } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
 import AlertDropdown from "../../alerts/alertDropDown";
@@ -37,7 +38,8 @@ import {
 } from "../../controllers/API";
 import { MenuBar } from "../../components/headerComponent/components/menuBar";
 import { FlowType } from "../../types/flow";
-import { CardComponent } from "./components/cardComponent";
+import { CardComponent } from "../../components/cardComponent";
+import { useNavigate } from "react-router-dom";
 export default function CommunityPage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
     useContext(TabsContext);
@@ -61,6 +63,7 @@ export default function CommunityPage() {
         })
       );
   }
+  const navigate = useNavigate();
 
   useEffect(() => {
     handleExamples();
@@ -87,7 +90,19 @@ export default function CommunityPage() {
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (
-            <CardComponent key={idx} flow={flow} id={flow.id} />
+            <CardComponent key={idx} flow={flow} id={flow.id} button={<Button
+              variant="outline"
+              size="sm"
+              className="whitespace-nowrap "
+              onClick={() => {
+                addFlow(flow, true).then((id) => {
+                  navigate("/flow/" + id);
+                });
+              }}
+            >
+              <GitFork className="w-4 mr-2" />
+              Fork Example
+            </Button>}/>
           ))}
       </div>
     </div>

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

@@ -1,11 +1,11 @@
 import { useContext, useEffect } from "react";
-import { Download, Upload, Plus, Home } from "lucide-react";
+import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { Button } from "../../components/ui/button";
-import { CardComponent } from "./components/cardComponent";
+import { Link, useNavigate } from "react-router-dom";
-import { useNavigate } from "react-router-dom";
+import { CardComponent } from "../../components/cardComponent";
 export default function HomePage() {
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
+  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
   useEffect(() => {
     setTabId("");
@@ -50,13 +50,32 @@ export default function HomePage() {
           </Button>
         </div>
       </div>
-      <span className="flex pb-8 px-6 text-muted-foreground w-[60%]">
+      <span className="flex pb-14 px-6 text-muted-foreground w-[60%]">
         Manage your personal projects. Download or upload your complete project
         collection.
       </span>
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {flows.map((flow, idx) => (
-          <CardComponent key={idx} flow={flow} id={flow.id} />
+          <CardComponent
+            key={idx}
+            flow={flow}
+            id={flow.id}
+            button={
+              <Link to={"/flow/" + flow.id}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                >
+                  <ExternalLink className="w-4 mr-2" />
+                  Edit Flow
+                </Button>
+              </Link>
+            }
+            onDelete={() => {
+              removeFlow(flow.id);
+            }}
+          />
         ))}
       </div>
     </div>