58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { TooltipProvider } from "@/components/ui/primitives/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { ControlModes } from "./control-modes";
|
|
import { PhaseSwitcher } from "./phase-switcher";
|
|
import { StructureTools } from "./structure-tools";
|
|
import useEditor from "@/store/use-editor";
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
// import { ViewToggles } from "./view-toggles";
|
|
|
|
export function ActionMenu({ className }: { className?: string }) {
|
|
|
|
const phase = useEditor((state) => state.phase);
|
|
const mode = useEditor((state) => state.mode);
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<div
|
|
className={cn(
|
|
"-translate-x-1/2 fixed bottom-6 left-1/2 z-50",
|
|
"rounded-2xl border border-zinc-800 bg-zinc-950/90 shadow-2xl backdrop-blur-md",
|
|
"transition-all duration-200 ease-out",
|
|
className
|
|
)}
|
|
>
|
|
|
|
{/* Structure Tools Row - Animated */}
|
|
<AnimatePresence>
|
|
{phase === "structure" && mode === "build" && (
|
|
<motion.div
|
|
className={cn(
|
|
'overflow-hidden border-zinc-800 max-h-20 border-b px-2 py-2'
|
|
)}
|
|
initial={{ opacity: 0, maxHeight: 0, paddingTop: 0, paddingBottom: 0,borderBottomWidth: 0, }}
|
|
animate={{ opacity: 1, maxHeight: 80, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, }}
|
|
exit={{ opacity: 0, maxHeight: 0, paddingTop: 0, paddingBottom: 0, borderBottomWidth: 0, }}
|
|
>
|
|
<div className="w-max">
|
|
<StructureTools />
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
{/* Control Mode Row - Always visible, centered */}
|
|
<div className="flex items-center justify-center gap-1 px-2 py-1.5">
|
|
<PhaseSwitcher />
|
|
<div className="mx-1 h-5 w-px bg-zinc-700" />
|
|
<ControlModes />
|
|
{/* <div className="mx-1 h-5 w-px bg-zinc-700" /> */}
|
|
{/* <ViewToggles /> */}
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
}
|