feat(viz): tree/BFS/DFS patterns

2025-09-01 20:49:11 +01:00
parent 47082ddb12
commit a9bbbf4a91
13 changed files with 2119 additions and 1 deletions
@@ -0,0 +1,55 @@
+'use client';
+
+import { AnimatePresence } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import type { QueueState } from '@/lib/visualizations/types';
+import { QueueElement } from '../primitives/queue-element';
+
+interface QueueViewProps {
+  queue: QueueState;
+  className?: string;
+}
+
+export function QueueView({ queue, className }: QueueViewProps) {
+  const hasElements = queue.elements.length > 0;
+
+  return (
+    <div className={cn('flex flex-col items-center', className)}>
+      {queue.label && (
+        <span className="mb-2 whitespace-nowrap text-sm font-medium text-[var(--muted-foreground)]">
+          {queue.label}
+        </span>
+      )}
+
+      <div className="relative flex min-w-[88px] flex-row items-center gap-1">
+        {/* Empty state */}
+        {!hasElements && (
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-dashed border-[var(--border)] text-xs text-[var(--muted-foreground)]">
+            empty
+          </div>
+        )}
+
+        {/* Queue elements - horizontal row, front on left, rear on right */}
+        <AnimatePresence mode="popLayout">
+          {queue.elements.map((element, index) => (
+            <QueueElement
+              key={element.id}
+              element={element}
+              isFront={index === 0}
+              isRear={index === queue.elements.length - 1 && queue.elements.length > 1}
+            />
+          ))}
+        </AnimatePresence>
+      </div>
+
+      {/* Direction indicator */}
+      <div className="mt-4 flex items-center gap-2 text-[10px] text-[var(--muted-foreground)]">
+        <span>dequeue</span>
+        <span>←</span>
+        <span className="w-8 border-t border-dashed border-[var(--border)]" />
+        <span>→</span>
+        <span>enqueue</span>
+      </div>
+    </div>
+  );
+}