91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/primitives/button";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/primitives/tooltip";
|
|
import { Building2, Map, Sofa } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import useEditor, { Phase } from "@/store/use-editor";
|
|
|
|
const editorModes: Array<{
|
|
id: Phase;
|
|
icon: typeof Map;
|
|
label: string;
|
|
shortcut: string;
|
|
description: string;
|
|
color: string;
|
|
activeColor: string;
|
|
}> = [
|
|
{
|
|
id: "site",
|
|
icon: Map,
|
|
label: "Site",
|
|
shortcut: "1",
|
|
description: "Edit terrain, place buildings, set boundaries",
|
|
color: "hover:bg-emerald-500/20 hover:text-emerald-400",
|
|
activeColor: "bg-emerald-500/20 text-emerald-400",
|
|
},
|
|
{
|
|
id: "structure",
|
|
icon: Building2,
|
|
label: "Structure",
|
|
shortcut: "2",
|
|
description: "Walls, rooms, doors, windows, ...",
|
|
color: "hover:bg-blue-500/20 hover:text-blue-400",
|
|
activeColor: "bg-blue-500/20 text-blue-400",
|
|
},
|
|
{
|
|
id: "furnish",
|
|
icon: Sofa,
|
|
label: "Furnish",
|
|
shortcut: "3",
|
|
description: "Place furniture, appliances, decorations",
|
|
color: "hover:bg-amber-500/20 hover:text-amber-400",
|
|
activeColor: "bg-amber-500/20 text-amber-400",
|
|
},
|
|
];
|
|
|
|
export function PhaseSwitcher() {
|
|
const phase = useEditor((state) => state.phase);
|
|
const setPhase = useEditor((state) => state.setPhase);
|
|
|
|
return (
|
|
<div className="-my-0.5 flex items-center gap-1 rounded-lg bg-white/5 p-0.5">
|
|
{editorModes.map((mode) => {
|
|
const Icon = mode.icon;
|
|
const isActive = phase === mode.id;
|
|
|
|
return (
|
|
<Tooltip key={mode.id}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
className={cn(
|
|
"h-8 w-8 transition-all",
|
|
"text-zinc-400",
|
|
!isActive && mode.color,
|
|
isActive && mode.activeColor
|
|
)}
|
|
onClick={() => setPhase(mode.id)}
|
|
size="icon"
|
|
variant="ghost"
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p className="font-medium">
|
|
{mode.label} ({mode.shortcut})
|
|
</p>
|
|
<p className="text-xs text-zinc-400">{mode.description}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|