69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import type { Todo } from "@/core/todos";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import {
|
|
QueueItem,
|
|
QueueItemContent,
|
|
QueueItemIndicator,
|
|
QueueList,
|
|
} from "../ai-elements/queue";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
} from "../ui/dropdown-menu";
|
|
|
|
export function DevTodoList({
|
|
className,
|
|
todos,
|
|
trigger,
|
|
hidden,
|
|
}: {
|
|
className?: string;
|
|
todos: Todo[];
|
|
trigger: React.ReactNode;
|
|
hidden: boolean;
|
|
}) {
|
|
if (hidden) {
|
|
return null;
|
|
}
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className={cn(
|
|
"z-[100] rounded-[20px] bg-ws-surface-base p-5 shadow-[0_0_20px_0_rgba(0,0,0,0.20)]",
|
|
className,
|
|
)}
|
|
align="start"
|
|
side="top"
|
|
>
|
|
<QueueList className="w-64">
|
|
{todos.map((todo, i) => (
|
|
<QueueItem key={i + (todo.content ?? "")}>
|
|
<div className="flex items-center gap-2">
|
|
<QueueItemIndicator
|
|
className={
|
|
todo.status === "in_progress" ? "bg-primary/70" : ""
|
|
}
|
|
completed={todo.status === "completed"}
|
|
/>
|
|
<QueueItemContent
|
|
className={
|
|
todo.status === "in_progress" ? "text-primary/70" : ""
|
|
}
|
|
completed={todo.status === "completed"}
|
|
>
|
|
{todo.content}
|
|
</QueueItemContent>
|
|
</div>
|
|
</QueueItem>
|
|
))}
|
|
</QueueList>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|