feat(viz): two pointers narrative

2025-08-24 15:30:46 +01:00
parent 2d581ab14f
commit 241489f1bd
17 changed files with 2191 additions and 2 deletions
@@ -0,0 +1,56 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import type { ArrayElementState } from "@/lib/visualizations/types";
+
+interface ArrayElementProps {
+  element: ArrayElementState;
+  size?: "sm" | "md" | "lg";
+  showIndex?: boolean;
+  className?: string;
+}
+
+const SIZE_CLASSES = {
+  sm: "w-10 h-10 text-sm",
+  md: "w-14 h-14 text-base",
+  lg: "w-18 h-18 text-lg",
+} as const;
+
+const STATE_CLASSES = {
+  normal: "bg-[var(--muted)] border-[var(--border)] text-[var(--foreground)]",
+  highlighted: "bg-[var(--primary)]/20 border-[var(--primary)] text-[var(--primary)]",
+  dimmed: "bg-[var(--muted)]/50 border-[var(--border)]/50 text-[var(--muted-foreground)] opacity-30",
+  success: "bg-green-500/20 border-green-500 text-green-500",
+  comparing: "bg-amber-500/20 border-amber-500 text-amber-500",
+} as const;
+
+export function ArrayElement({
+  element,
+  size = "md",
+  showIndex = true,
+  className,
+}: ArrayElementProps) {
+  return (
+    <div className={cn("flex flex-col items-center gap-1", className)}>
+      <motion.div
+        layout
+        initial={false}
+        animate={{
+          scale: element.state === "highlighted" ? 1.05 : 1,
+        }}
+        transition={{ duration: 0.2 }}
+        className={cn(
+          "flex items-center justify-center rounded-lg border-2 font-mono font-medium transition-colors duration-200",
+          SIZE_CLASSES[size],
+          STATE_CLASSES[element.state]
+        )}
+      >
+        {element.value}
+      </motion.div>
+      {showIndex && (
+        <span className="text-xs text-[var(--muted-foreground)]">{element.index}</span>
+      )}
+    </div>
+  );
+}