mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
5f15641b1b
* initial working konva * working multi polygons * multi zones * clean up * new zone dialog * clean up * relative coordinates and colors * fix color order * better motion tuner * objects for zones * progress * merge dev * edit pane * motion and object masks * filtering * add objects and unsaved to type * motion tuner, edit controls, tooltips * object and motion edit panes * polygon item component, switch color, object form, hover cards * working zone edit pane * working motion masks * object masks and deletion of all types * use FilterSwitch * motion tuner fixes and tweaks * clean up * tweaks * spaces in camera name * tweaks * allow dragging of points while drawing polygon * turn off editing mode when switching camera * limit interpolated coordinates and use crosshair cursor * padding * fix tooltip trigger for icons * konva tweaks * consolidate * fix top menu items on mobile
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import { IconType } from "react-icons";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { isDesktop } from "react-device-detect";
|
|
|
|
const variants = {
|
|
primary: {
|
|
active: "font-bold text-white bg-selected rounded-lg",
|
|
inactive: "text-secondary-foreground bg-secondary rounded-lg",
|
|
},
|
|
overlay: {
|
|
active: "font-bold text-white bg-selected rounded-full",
|
|
inactive:
|
|
"text-primary rounded-full bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500",
|
|
},
|
|
};
|
|
|
|
type CameraFeatureToggleProps = {
|
|
className?: string;
|
|
variant?: "primary" | "overlay";
|
|
isActive: boolean;
|
|
Icon: IconType;
|
|
title: string;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
export default function CameraFeatureToggle({
|
|
className = "",
|
|
variant = "primary",
|
|
isActive,
|
|
Icon,
|
|
title,
|
|
onClick,
|
|
}: CameraFeatureToggleProps) {
|
|
const content = (
|
|
<div
|
|
onClick={onClick}
|
|
className={`${className} flex flex-col justify-center items-center ${
|
|
variants[variant][isActive ? "active" : "inactive"]
|
|
}`}
|
|
>
|
|
<Icon
|
|
className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-secondary-foreground"}`}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
if (isDesktop) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger>{content}</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>{title}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
}
|