29 lines
768 B
TypeScript
29 lines
768 B
TypeScript
"use client";
|
|
import { MinusIcon, PlusIcon } from "lucide-react";
|
|
import { mapAtom } from "../../state/map";
|
|
import { useAtom } from "jotai";
|
|
|
|
export default function ZoomControl() {
|
|
const [map] = useAtom(mapAtom);
|
|
|
|
return (
|
|
<div className="cursor-pointer flex flex-col items-center bg-primary text-primary-foreground rounded-lg shadow-md text-md">
|
|
<button
|
|
id="zoomIn"
|
|
onClick={() => map?.zoomIn()}
|
|
className="cursor-pointer p-2 rounded-full transition-all"
|
|
>
|
|
<PlusIcon size={18} />
|
|
</button>
|
|
|
|
<button
|
|
id="zoomOut"
|
|
onClick={() => map?.zoomOut()}
|
|
className="cursor-pointer p-2 rounded-full transition-all "
|
|
>
|
|
<MinusIcon size={18} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|