From 3a774c6280294d8d40df397a1de1d653ce05a8b5 Mon Sep 17 00:00:00 2001
From: jaydenpiao <jaydenpiao@gmail.com>
Date: Sun, 2 Jun 2024 10:46:39 -0700
Subject: [PATCH 1/3] init runnerclip

---
 main/components/ui/RunnerClip.tsx | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 main/components/ui/RunnerClip.tsx

diff --git a/main/components/ui/RunnerClip.tsx b/main/components/ui/RunnerClip.tsx
new file mode 100644
index 0000000..e6cda4b
--- /dev/null
+++ b/main/components/ui/RunnerClip.tsx
@@ -0,0 +1,5 @@
+const RunnerClip = () => {
+  return <div>hello</div>;
+};
+
+export default RunnerClip;

From ec7059b34b0c5a3f4c9b829c16dfe56d60a01a0b Mon Sep 17 00:00:00 2001
From: jaydenpiao <jaydenpiao@gmail.com>
Date: Sun, 2 Jun 2024 10:52:57 -0700
Subject: [PATCH 2/3] initial card with functionality

---
 main/components/ui/RunnerClip.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/main/components/ui/RunnerClip.tsx b/main/components/ui/RunnerClip.tsx
index e6cda4b..448d613 100644
--- a/main/components/ui/RunnerClip.tsx
+++ b/main/components/ui/RunnerClip.tsx
@@ -1,5 +1,34 @@
+import { useState } from "react";
+
 const RunnerClip = () => {
-  return <div>hello</div>;
+  const [buttonState, setButtonState] = useState("Download");
+
+  const handleClick = () => {
+    if (buttonState === "Download") {
+      setButtonState("Downloading");
+    } else if (buttonState === "Downloading") {
+      setButtonState("Use");
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between p-4 border rounded shadow-md">
+      <div className="text-xl font-semibold">Title</div>
+      <button
+        onClick={handleClick}
+        className={`px-4 py-2 rounded ${
+          buttonState === "Download"
+            ? "bg-green-500 text-white"
+            : buttonState === "Downloading"
+            ? "bg-gradient-to-r from-green-500 to-white text-black"
+            : "bg-green-500 text-white"
+        }`}
+        disabled={buttonState === "Use"}
+      >
+        {buttonState}
+      </button>
+    </div>
+  );
 };
 
 export default RunnerClip;

From cd454cb31ddb8c512f99ff122a4e41e616531375 Mon Sep 17 00:00:00 2001
From: jaydenpiao <jaydenpiao@gmail.com>
Date: Sun, 2 Jun 2024 12:10:43 -0700
Subject: [PATCH 3/3] done runner clip

---
 main/components/ui/RunnerClip.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/main/components/ui/RunnerClip.tsx b/main/components/ui/RunnerClip.tsx
index 448d613..69a8431 100644
--- a/main/components/ui/RunnerClip.tsx
+++ b/main/components/ui/RunnerClip.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
+import { Button } from "./button";
+import { DownloadIcon } from "lucide-react";
 
-const RunnerClip = () => {
+const RunnerClip = ({ title }: { title: string }) => {
   const [buttonState, setButtonState] = useState("Download");
 
   const handleClick = () => {
@@ -12,21 +14,23 @@ const RunnerClip = () => {
   };
 
   return (
-    <div className="flex items-center justify-between p-4 border rounded shadow-md">
-      <div className="text-xl font-semibold">Title</div>
-      <button
+    <div className="flex items-center justify-between border rounded-lg w-[389px] h-[84px] py-[22px] px-[20px] text-[#3F3F4C]">
+      <div className="text-xl font-medium leading-none">{title}</div>
+      <Button
         onClick={handleClick}
-        className={`px-4 py-2 rounded ${
+        className={
           buttonState === "Download"
-            ? "bg-green-500 text-white"
+            ? "bg-[#9CC8C4] hover:bg-[#7daba7] text-[#3F3F4C] gap-[10px]"
             : buttonState === "Downloading"
-            ? "bg-gradient-to-r from-green-500 to-white text-black"
-            : "bg-green-500 text-white"
-        }`}
-        disabled={buttonState === "Use"}
+            ? "bg-gradient-to-r from-[#9CC8C4] to-white text-[#3F3F4C]"
+            : "bg-[#9CC8C4] hover:bg-[#7daba7] text-[#3F3F4C]"
+        }
       >
         {buttonState}
-      </button>
+        {buttonState === "Download" && (
+          <DownloadIcon className="w-[20px] h-[20px]" />
+        )}
+      </Button>
     </div>
   );
 };