apps/canvas/front/src/components/resources.tsx

import { Button } from "@/components/ui/button";
import { ReactFlowInstance, useReactFlow } from "@xyflow/react";
import { v4 as uuidv4 } from "uuid";
import { useCallback, useState } from "react";
import { Accordion, AccordionTrigger } from "./ui/accordion";
import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
import { NodeType, useCategories } from "@/lib/state";
import { CategoryItem } from "@/lib/categories";
import { Icon } from "./icon";

function addResource(i: CategoryItem<NodeType>, flow: ReactFlowInstance) {
	flow.addNodes({
		id: uuidv4(),
		position: {
			x: 0,
			y: 0,
		},
		type: i.type,
		connectable: true,
		data: i.init,
	});
}

export function Resources() {
	const flow = useReactFlow();
	const categories = useCategories();
	const onResourceAdd = useCallback(
		(item: CategoryItem<NodeType>) => {
			return () => addResource(item, flow);
		},
		[flow],
	);
	const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));
	return (
		<>
			<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
				{categories.map((c) => (
					<AccordionItem key={c.title} value={c.title} className={"px-3" + (c.active ? " bg-amber-100" : "")}>
						<AccordionTrigger>{c.title}</AccordionTrigger>
						<AccordionContent>
							<div className="flex flex-col space-y-1">
								{c.items.map((item) => (
									<Button
										key={item.title}
										onClick={onResourceAdd(item)}
										style={{ justifyContent: "flex-start" }}
									>
										{Icon(item.type)}
										{item.title}
									</Button>
								))}
							</div>
						</AccordionContent>
					</AccordionItem>
				))}
			</Accordion>
		</>
	);
}