37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { cn } from "@/lib/utils";
|
|
import type { CalculationState } from "@/lib/visualizations/types";
|
|
|
|
interface CalculationBubbleProps {
|
|
calculation: CalculationState | null;
|
|
className?: string;
|
|
}
|
|
|
|
export function CalculationBubble({
|
|
calculation,
|
|
className,
|
|
}: CalculationBubbleProps) {
|
|
return (
|
|
<AnimatePresence>
|
|
{calculation && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8, y: 10 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.8, y: -10 }}
|
|
transition={{ duration: 0.25, ease: "easeOut" }}
|
|
className={cn(
|
|
"inline-flex items-center gap-2 rounded-lg border border-[var(--primary)]/40 bg-[var(--primary)]/10 px-3 py-2 font-mono text-sm",
|
|
className
|
|
)}
|
|
>
|
|
<span className="text-[var(--muted-foreground)]">{calculation.expression}</span>
|
|
<span className="text-[var(--primary)]">=</span>
|
|
<span className="font-semibold text-[var(--primary)]">{calculation.result}</span>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|