From 26ab5d3bc3eedde18efbd9f3aad3f0a68cbb59f8 Mon Sep 17 00:00:00 2001
From: Kevin Mok <me@kevin-mok.com>
Date: Fri, 28 Mar 2025 13:55:43 -0400
Subject: [PATCH] Show image in event and time in top right corner

---
 src/components/Calendar.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index 24baa05..5941a2f 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -487,8 +487,20 @@ const DraggableEvent = ({
         touchAction: 'manipulation'
       }}
     >
+      <div className="relative rounded overflow-hidden mb-2">
+        {event.imageUrl && (
+          <img 
+            src={event.imageUrl} 
+            alt={event.title}
+            className="w-full h-16 md:h-12 object-cover pointer-events-none"
+            draggable="false"
+          />
+        )}
+        <div className="absolute top-1 right-1 bg-black/50 text-white text-xs px-2 py-1 rounded">
+          {event.time}
+        </div>
+      </div>
       <h3 className="font-medium text-black">{event.title}</h3>
-      <p className="text-sm text-gray-700">{event.time}</p>
     </motion.div>
   );
 };