File size: 4,364 Bytes
3119726 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import React from "react";
import { motion } from "motion/react";
import { MemorialMilestone } from "../types";
import { Calendar, Eye, Heart, Sparkles, Plus, Trash2 } from "lucide-react";
interface InteractiveTimelineProps {
milestones: MemorialMilestone[];
gfNickname: string;
}
export default function InteractiveTimeline({ milestones, gfNickname }: InteractiveTimelineProps) {
return (
<div className="relative max-w-4xl mx-auto px-4 py-16" id="memories-timeline-container">
{/* Dynamic Section Theme Title */}
<div className="text-center mb-16">
<span className="bg-rose-100 text-rose-700 text-xs tracking-widest font-bold font-display px-3 py-1.5 rounded-full uppercase border border-rose-200">
Chapter I • Our Chapters Together
</span>
<h3 className="mt-3 font-display font-extrabold text-3xl md:text-4xl text-slate-800 tracking-tight">
How <span className="text-rose-500 font-script text-4xl md:text-5xl font-normal lowercase">we</span> became us
</h3>
<p className="mt-2 text-slate-500 font-display text-sm max-w-md mx-auto">
Every moment with you is a favorite, but here are the key magical chapters that changed my life forever.
</p>
</div>
{/* The Timeline Spine Line */}
<div className="absolute left-1/2 top-48 bottom-16 w-0.5 -translate-x-1/2 bg-gradient-to-b from-rose-200 via-rose-300 to-transparent hidden md:block" />
<div className="absolute left-6 top-48 bottom-16 w-0.5 bg-rose-200/60 md:hidden" />
{/* Milestones Loop */}
<div className="space-y-12 relative">
{milestones.map((milestone, index) => {
const isEven = index % 2 === 0;
return (
<motion.div
key={milestone.id}
initial={{ opacity: 0, y: 60 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-60px" }}
transition={{ duration: 0.65, delay: index * 0.1, type: "spring", stiffness: 100 }}
className={`flex flex-col md:flex-row items-stretch ${
isEven ? "md:flex-row-reverse" : ""
} relative`}
>
{/* Timeline Center Indicator Icon */}
<div className="absolute left-0.5 md:left-1/2 md:-translate-x-1/2 top-3 z-10">
<motion.div
whileHover={{ scale: 1.2, rotate: 15 }}
className={`w-10 h-10 rounded-full flex items-center justify-center text-lg shadow-md border-2 bg-white border-rose-300 animate-heartbeat`}
>
<span>{milestone.emoji || "❤️"}</span>
</motion.div>
</div>
{/* Box Content Card */}
<div className="w-full md:w-[46%] ml-12 md:ml-0">
<motion.div
whileHover={{ y: -3 }}
className="bg-white rounded-2xl p-6 shadow-md border border-slate-100 hover:shadow-lg transition-shadow relative group"
>
{/* Decorative badge with cute date */}
<div className="inline-flex items-center gap-1.5 bg-rose-50 text-rose-600 px-3 py-1 rounded-full text-xs font-display font-medium mb-3 border border-rose-100/60">
<Calendar className="w-3.5 h-3.5 text-rose-400" />
<span>{milestone.date}</span>
</div>
<h4 className="font-display font-bold text-slate-800 text-lg group-hover:text-rose-500 transition-colors">
{milestone.title}
</h4>
<p className="mt-2 text-slate-600 font-display text-sm leading-relaxed whitespace-pre-line">
{milestone.description}
</p>
{/* Sparkle detailing */}
<div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
<Sparkles className="w-4 h-4 text-rose-300 animate-pulse" />
</div>
</motion.div>
</div>
{/* Space holding panel for aesthetic spacing */}
<div className="hidden md:block w-[46%]" />
</motion.div>
);
})}
</div>
</div>
);
}
|