33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import Panel from "@/components/Panel";
|
|
|
|
interface NarrationProps {
|
|
text: string;
|
|
stepIndex: number;
|
|
title: string;
|
|
}
|
|
|
|
export default function Narration({ text, stepIndex, title }: NarrationProps) {
|
|
return (
|
|
<Panel>
|
|
<p className="text-xs uppercase tracking-widest text-muted-foreground mb-2">{title}</p>
|
|
<div className="min-h-[3.5rem]">
|
|
<AnimatePresence mode="wait">
|
|
<motion.p
|
|
key={stepIndex}
|
|
initial={{ opacity: 0, y: 6 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -6 }}
|
|
transition={{ duration: 0.22 }}
|
|
className="text-lg leading-relaxed text-balance"
|
|
>
|
|
{text}
|
|
</motion.p>
|
|
</AnimatePresence>
|
|
</div>
|
|
</Panel>
|
|
);
|
|
}
|