57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|