blob: 899d239a9a1cb3146656e8df89a8e3ec8c85ef76 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
"use client";
import { cn } from "@repo/lib/utils";
import { Button } from "@repo/ui/components/button";
import { GlassMenuEffect } from "@repo/ui/other/glass-effect";
import { Move, ZoomIn, ZoomOut } from "lucide-react";
import { memo } from "react";
import type { ControlsProps } from "./types";
export const Controls = memo<ControlsProps>(
({ onZoomIn, onZoomOut, onResetView, variant = "console" }) => {
// Use explicit classes - controls positioning not defined in constants
// Using a reasonable default position
const getPositioningClasses = () => {
if (variant === "console") {
return "bottom-4 left-4";
}
if (variant === "consumer") {
return "bottom-20 right-4";
}
return "";
};
return (
<div
className={cn(
"absolute z-10 rounded-xl overflow-hidden",
getPositioningClasses(),
)}
>
{/* Glass effect background */}
<GlassMenuEffect rounded="rounded-xl" />
<div className="relative z-10 px-4 py-3">
<div className="flex items-center gap-2">
<Button
className="h-8 w-8 p-0 text-slate-200 hover:bg-slate-700/40 hover:text-slate-100 transition-colors"
onClick={onZoomIn}
size="sm"
variant="ghost"
>
<ZoomIn className="w-4 h-4" />
</Button>
<Button
className="h-8 w-8 p-0 text-slate-200 hover:bg-slate-700/40 hover:text-slate-100 transition-colors"
onClick={onZoomOut}
size="sm"
variant="ghost"
>
<ZoomOut className="w-4 h-4" />
</Button>
<Button
className="h-8 w-8 p-0 text-slate-200 hover:bg-slate-700/40 hover:text-slate-100 transition-colors"
onClick={onResetView}
size="sm"
variant="ghost"
>
<Move className="w-4 h-4" />
</Button>
</div>
</div>
</div>
);
},
);
Controls.displayName = "Controls";
|