import { motion, useReducedMotion } from "motion/react";
import type { CSSProperties, ReactNode } from "react";
import { aceternityMotion } from "@/lib/aceternity-motion";
import { canvasThemes } from "@/lib/canvas-theme";
import { cn } from "@/lib/utils";
import { useThemeStore } from "@/stores/use-theme-store";
export type CanvasCreateCommand = {
id: string;
label: string;
icon: ReactNode;
badge?: string;
section: "node" | "workflow" | "project" | "resource";
onClick: () => void;
};
export function CanvasCreateMenu({ commands }: { commands: CanvasCreateCommand[] }) {
const theme = canvasThemes[useThemeStore((state) => state.theme)];
const projectCommands = commands.filter((command) => command.section === "project");
const nodeCommands = commands.filter((command) => command.section === "node");
const workflowCommands = commands.filter((command) => command.section === "workflow");
const resourceCommands = commands.filter((command) => command.section === "resource");
return (
添加节点
{projectCommands.map((command) => (
))}
{workflowCommands.length ? (
<>
) : null}
);
}
function CanvasCreateCommandGrid({ commands, variant }: { commands: CanvasCreateCommand[]; variant: "node" | "compact" | "workflow" }) {
const theme = canvasThemes[useThemeStore((state) => state.theme)];
const reducedMotion = useReducedMotion();
return (
{commands.map((command) => (
event.stopPropagation()}
onClick={command.onClick}
>
{variant === "node" ? (
<>
{command.icon}
{command.badge ? {command.badge} : null}
{command.label}
) : (
<>
{command.icon}
{command.label}
)}
))}
);
}
function MenuSection({ title, color, spaced = false }: { title: string; color: string; spaced?: boolean }) {
return {title}
;
}