38 lines
999 B
TypeScript
38 lines
999 B
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { useMap } from '@/app/map-context'
|
|
import { Button } from '@/components/ui/button'
|
|
import { ZoomIn, ZoomOut, RotateCcw } from 'lucide-react'
|
|
|
|
export function MapControls() {
|
|
const { zoomIn, zoomOut, reset } = useMap()
|
|
|
|
return (
|
|
<div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
|
|
<Button
|
|
size="sm"
|
|
onClick={zoomIn}
|
|
className="w-10 h-10 p-0"
|
|
>
|
|
<ZoomIn className="w-4 h-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
size="sm"
|
|
onClick={zoomOut}
|
|
className="w-10 h-10 p-0"
|
|
>
|
|
<ZoomOut className="w-4 h-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
size="sm"
|
|
onClick={reset}
|
|
className="w-10 h-10 p-0"
|
|
>
|
|
<RotateCcw className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|