From de1367bdd0fdb5679a758c6b21b2d94a8aa744f9 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 30 Oct 2024 16:25:51 +0600
Subject: [PATCH] feat: make card clickable

---
 src/components/CourseNotes/CourseNoteCard.tsx | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/CourseNotes/CourseNoteCard.tsx b/src/components/CourseNotes/CourseNoteCard.tsx
index 3052d4b50..08da8da5d 100644
--- a/src/components/CourseNotes/CourseNoteCard.tsx
+++ b/src/components/CourseNotes/CourseNoteCard.tsx
@@ -34,24 +34,30 @@ export function CourseNoteCard(props: CourseNoteCardProps) {
   }, [content]);
 
   return (
-    <div className="relative flex flex-col gap-3 p-4">
+    <button
+      className="relative flex flex-col gap-3 p-4 text-left"
+      onClick={onLearnMoreClick}
+    >
       <div className="flex items-center justify-between gap-2">
         <div className="flex max-w-max items-center gap-1 rounded-full border border-zinc-700 px-3 py-1 text-xs text-zinc-200">
-          <a className="underline-offset-2 hover:text-white hover:underline">
+          <a
+            className="underline-offset-2 hover:text-white hover:underline"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
             {chapterTitle}
           </a>
           <span className="text-zinc-400">/</span>
-          <a className="underline-offset-2 hover:text-white hover:underline">
+          <a
+            className="underline-offset-2 hover:text-white hover:underline"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
             {lessonTitle}
           </a>
         </div>
-
-        <button
-          className="flex items-center gap-1 text-sm text-zinc-400 hover:text-white"
-          onClick={onLearnMoreClick}
-        >
-          Learn More <ArrowRight className="size-4" />
-        </button>
       </div>
 
       <div
@@ -59,6 +65,6 @@ export function CourseNoteCard(props: CourseNoteCardProps) {
         // FIXME: Sanitize content before rendering
         dangerouslySetInnerHTML={{ __html: markdownHTML }}
       ></div>
-    </div>
+    </button>
   );
 }