40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { RotateCw, ZoomIn, ZoomOut } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
interface GlobeControlsProps {
|
|
onResetView: () => void;
|
|
onZoomIn: () => void;
|
|
onZoomOut: () => void;
|
|
}
|
|
|
|
export function GlobeControls({ onResetView, onZoomIn, onZoomOut }: GlobeControlsProps) {
|
|
const t = useTranslations("globeControls");
|
|
return (
|
|
<div className="absolute bottom-4 right-4 z-10 flex flex-col gap-2">
|
|
<button
|
|
onClick={onZoomIn}
|
|
className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
|
|
aria-label={t("zoomIn")}
|
|
>
|
|
<ZoomIn className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={onZoomOut}
|
|
className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
|
|
aria-label={t("zoomOut")}
|
|
>
|
|
<ZoomOut className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={onResetView}
|
|
className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
|
|
aria-label={t("resetView")}
|
|
>
|
|
<RotateCw className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|