56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|