Queue

import {
	Queue,
	QueueItem,
	QueueItemContent,
	QueueItemIndicator,
	QueueList,
	QueueSection,
	QueueSectionContent,
	QueueSectionLabel,
	QueueSectionTrigger,
} from "@cynco-labs/ui/ai";

export default function QueueDemo() {
	return (
		<Queue className="max-w-[460px]">
			<QueueSection defaultOpen>
				<QueueSectionTrigger>
					<QueueSectionLabel count={3} label="Tasks" />
				</QueueSectionTrigger>
				<QueueSectionContent>
					<QueueList>
						{[
							["Import October statement", true],
							["Match 14 receipts", false],
							["Send overdue reminders", false],
						].map((t) => (
							<QueueItem key={t[0]}>
								<div className="flex items-center gap-2">
									<QueueItemIndicator completed={t[1]} />
									<QueueItemContent completed={t[1]}>{t[0]}</QueueItemContent>
								</div>
							</QueueItem>
						))}
					</QueueList>
				</QueueSectionContent>
			</QueueSection>
		</Queue>
	);
}