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>
    </>
  );
}