From 76ba7603280f5e31450c8f42bc01c4893954f8f8 Mon Sep 17 00:00:00 2001
From: Kevin Mok <me@kevin-mok.com>
Date: Fri, 28 Mar 2025 15:11:40 -0400
Subject: [PATCH] Transition details from event to popup

---
 src/components/DraggableEvent.tsx | 21 +++++++++++++++++----
 src/components/EventModal.tsx     | 22 +++++++++++++++++++---
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/DraggableEvent.tsx b/src/components/DraggableEvent.tsx
index 7e60a09..43b032b 100644
--- a/src/components/DraggableEvent.tsx
+++ b/src/components/DraggableEvent.tsx
@@ -71,6 +71,7 @@ export default function DraggableEvent({
       onClick={() => !isDragging && onEventClick({ event, date })}
       className="bg-white p-4 rounded shadow-md mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
       whileHover={{ scale: 1.01 }}
+      transition={{ duration: 1.2 }}
       style={{
         opacity: isDragging ? 0.7 : 1,
         userSelect: 'none',
@@ -80,18 +81,30 @@ export default function DraggableEvent({
     >
       <div className="relative rounded overflow-hidden mb-2">
         {event.imageUrl && (
-          <img 
+          <motion.img 
+            layoutId={`event-image-${event.id}`}
+            transition={{ duration: 1.2 }}
             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-gradient-to-br from-indigo-600 to-violet-600 text-white text-[12px] md:text-[10px] px-1 py-0.5 rounded">
+        <motion.div
+          layoutId={`event-time-${event.id}`}
+          transition={{ duration: 1.2 }}
+          className="absolute top-1 right-1 bg-gradient-to-br from-indigo-600 to-violet-600 text-white text-[12px] md:text-[10px] px-1 py-0.5 rounded"
+        >
           {event.time}
-        </div>
+        </motion.div>
       </div>
-      <h3 className="text-sm text-black font-sans">{event.title}</h3>
+      <motion.h3 
+        layoutId={`event-title-${event.id}`}
+        transition={{ duration: 1.2 }}
+        className="text-sm text-black font-sans"
+      >
+        {event.title}
+      </motion.h3>
     </motion.div>
   );
 } 
\ No newline at end of file
diff --git a/src/components/EventModal.tsx b/src/components/EventModal.tsx
index 477ab0c..c981acc 100644
--- a/src/components/EventModal.tsx
+++ b/src/components/EventModal.tsx
@@ -27,6 +27,7 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
+        transition={{ duration: 1.2 }}
       >
         <motion.div
           className="bg-white/95 backdrop-blur-sm rounded-lg p-8 max-w-lg w-full relative"
@@ -34,6 +35,7 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
           initial={{ scale: 0.95 }}
           animate={{ scale: 1 }}
           exit={{ scale: 0.95 }}
+          transition={{ duration: 1.2 }}
         >
           <button
             onClick={onClose}
@@ -56,15 +58,29 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
           </button>
           
           {event.imageUrl && (
-            <img
+            <motion.img
+              layoutId={`event-image-${event.id}`}
+              transition={{ duration: 1.2 }}
               src={event.imageUrl}
               alt={event.title}
               className="w-full h-56 object-cover rounded-lg mb-4 mt-2"
             />
           )}
-          <motion.h2 className="text-lg mb-4 font-sans">{event.title}</motion.h2>
+          <motion.h2 
+            layoutId={`event-title-${event.id}`}
+            transition={{ duration: 1.2 }}
+            className="text-lg mb-4 font-sans"
+          >
+            {event.title}
+          </motion.h2>
           <motion.p className="text-gray-600 mb-2 font-sans">Date: {formattedDate}</motion.p>
-          <motion.p className="text-gray-600 font-sans">Time: {event.time}</motion.p>
+          <motion.p 
+            layoutId={`event-time-${event.id}`}
+            transition={{ duration: 1.2 }}
+            className="text-gray-600 font-sans"
+          >
+            Time: {event.time}
+          </motion.p>
           {event.description && (
             <motion.p className="text-gray-600 font-sans">
               Description: {event.description}