108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import NextImage from "next/image";
|
|
import { Button } from "@/components/ui/primitives/button";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/primitives/tooltip";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import useEditor, { CatalogCategory } from "@/store/use-editor";
|
|
|
|
export type FurnishToolConfig = {
|
|
id: "item";
|
|
iconSrc: string;
|
|
label: string;
|
|
catalogCategory: CatalogCategory;
|
|
};
|
|
|
|
// Furnish mode tools: furniture, appliances, decoration (painting is now a control mode)
|
|
export const furnishTools: FurnishToolConfig[] = [
|
|
{
|
|
id: "item",
|
|
iconSrc: "/icons/couch.png",
|
|
label: "Furniture",
|
|
catalogCategory: "furniture",
|
|
},
|
|
{
|
|
id: "item",
|
|
iconSrc: "/icons/appliance.png",
|
|
label: "Appliance",
|
|
catalogCategory: "appliance",
|
|
},
|
|
{
|
|
id: "item",
|
|
iconSrc: "/icons/kitchen.png",
|
|
label: "Kitchen",
|
|
catalogCategory: "kitchen",
|
|
},
|
|
{
|
|
id: "item",
|
|
iconSrc: "/icons/bathroom.png",
|
|
label: "Bathroom",
|
|
catalogCategory: "bathroom",
|
|
},
|
|
{
|
|
id: "item",
|
|
iconSrc: "/icons/tree.png",
|
|
label: "Outdoor",
|
|
catalogCategory: "outdoor",
|
|
},
|
|
];
|
|
|
|
export function FurnishTools() {
|
|
const mode = useEditor((state) => state.mode);
|
|
const activeTool = useEditor((state) => state.tool);
|
|
const setActiveTool = useEditor((state) => state.setTool);
|
|
const catalogCategory = useEditor((state) => state.catalogCategory);
|
|
const setCatalogCategory = useEditor((state) => state.setCatalogCategory);
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5">
|
|
{furnishTools.map((tool, index) => {
|
|
// For item tools with catalog category, check both tool and category match
|
|
const isActive =
|
|
mode === "build" &&
|
|
activeTool === "item" &&
|
|
catalogCategory === tool.catalogCategory;
|
|
|
|
return (
|
|
<Tooltip key={`${tool.id}-${tool.catalogCategory ?? index}`}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
className={cn(
|
|
"size-11 rounded-lg transition-all",
|
|
isActive && "bg-primary shadow-md shadow-primary/20",
|
|
!isActive && "hover:bg-white/10",
|
|
)}
|
|
onClick={() => {
|
|
setCatalogCategory(tool.catalogCategory);
|
|
setActiveTool("item");
|
|
}}
|
|
size="icon"
|
|
variant={isActive ? "default" : "ghost"}
|
|
>
|
|
<NextImage
|
|
alt={tool.label}
|
|
className="size-full object-contain"
|
|
height={28}
|
|
src={tool.iconSrc}
|
|
width={28}
|
|
/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>
|
|
{tool.label}
|
|
{isActive && " (Click to deselect)"}
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|