83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import { cn } from "@/lib/utils";
|
||
import type { ArrayState, PointerState } from "@/lib/visualizations/types";
|
||
import { ArrayElement } from "../primitives/array-element";
|
||
import { Pointer } from "../primitives/pointer";
|
||
|
||
interface ArrayViewProps {
|
||
array: ArrayState;
|
||
pointers: PointerState[];
|
||
showIndices?: boolean;
|
||
elementSize?: "sm" | "md" | "lg";
|
||
className?: string;
|
||
}
|
||
|
||
// Must match SIZE_CLASSES in array-element.tsx (Tailwind units × 4)
|
||
const ELEMENT_WIDTHS = {
|
||
sm: 40, // w-10 = 40px
|
||
md: 56, // w-14 = 56px
|
||
lg: 72, // w-18 = 72px
|
||
} as const;
|
||
|
||
const ELEMENT_GAPS = {
|
||
sm: 4,
|
||
md: 8,
|
||
lg: 12,
|
||
} as const;
|
||
|
||
export function ArrayView({
|
||
array,
|
||
pointers,
|
||
showIndices = true,
|
||
elementSize = "md",
|
||
className,
|
||
}: ArrayViewProps) {
|
||
const elementWidth = ELEMENT_WIDTHS[elementSize];
|
||
const gap = ELEMENT_GAPS[elementSize];
|
||
|
||
// Calculate total array width for proper pointer alignment
|
||
const totalWidth = array.elements.length * elementWidth + (array.elements.length - 1) * gap;
|
||
|
||
return (
|
||
<div className={cn("flex flex-col items-center", className)}>
|
||
{array.label && (
|
||
<span className="mb-2 text-sm font-medium text-[var(--muted-foreground)]">
|
||
{array.label}
|
||
</span>
|
||
)}
|
||
|
||
{/* Container that sizes to array width - ensures pointer/array alignment */}
|
||
<div className="relative" style={{ width: totalWidth }}>
|
||
{/* Pointers row */}
|
||
<div className="relative mb-1 h-10">
|
||
{pointers.map((pointer) => (
|
||
<Pointer
|
||
key={pointer.id}
|
||
pointer={pointer}
|
||
elementWidth={elementWidth}
|
||
gap={gap}
|
||
value={array.elements[pointer.index]?.value}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* Array elements */}
|
||
<div
|
||
className="flex"
|
||
style={{ gap: `${gap}px` }}
|
||
>
|
||
{array.elements.map((element) => (
|
||
<ArrayElement
|
||
key={`${array.id}-${element.index}`}
|
||
element={element}
|
||
size={elementSize}
|
||
showIndex={showIndices}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|