From 99cbd27623a782f8fe711280e0f27245564a9e63 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 9 Jun 2023 12:40:51 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20feat(cardComponent):=20add=20Car?=
 =?UTF-8?q?dComponent=20to=20display=20flow=20information=20The=20CardComp?=
 =?UTF-8?q?onent=20is=20a=20new=20component=20that=20displays=20informatio?=
 =?UTF-8?q?n=20about=20a=20flow.=20It=20includes=20a=20header=20with=20the?=
 =?UTF-8?q?=20flow=20name=20and=20a=20delete=20button,=20a=20description,?=
 =?UTF-8?q?=20and=20a=20footer=20with=20badges=20and=20an=20edit=20button.?=
 =?UTF-8?q?=20The=20component=20is=20designed=20to=20be=20reusable=20and?=
 =?UTF-8?q?=20can=20display=20different=20types=20of=20flows.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cardComponent/index.tsx    | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/frontend/src/components/cardComponent/index.tsx

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
new file mode 100644
index 000000000..4578c5f21
--- /dev/null
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  ArrowTopRightOnSquareIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import { OpenAiIcon } from "../../icons/OpenAi";
+import { Button } from "../../components/ui/button";
+import { Badge } from "../../components/ui/badge";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+export const CardComponent = ({
+  flow,
+  idx,
+  removeFlow,
+  setTabIndex,
+  setActiveTab,
+}) => {
+  return (
+    <Card className="group">
+      <CardHeader>
+        <CardTitle className="flex justify-between items-start">
+          <div className="flex gap-4 items-center">
+            <span
+              className={
+                "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
+                (idx === 0 ? "bg-blue-100" : " bg-orange-100")
+              }
+            >
+              {idx === 0 ? "🤖" : "🛠️"}
+            </span>
+            {flow.name}
+          </div>
+          <button
+            onClick={() => {
+              removeFlow(flow.id);
+            }}
+          >
+            <TrashIcon 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">
+            {idx === 0
+              ? "This flow creates an agent that accesses a department store database and APIs to monitor customer activity and overall storage."
+              : "This is a new Flow"}
+            {/* {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">{idx === 0 ? "Agent" : "Tool"}</Badge>
+            {idx === 0 && (
+              <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 opacity-0 group-hover:opacity-100 transition-all"
+            onClick={() => {
+              setTabIndex(idx);
+              setActiveTab("myflow");
+            }}
+          >
+            <ArrowTopRightOnSquareIcon className="w-4 mr-2" />
+            Edit
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};