63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
"use client";
|
||
|
||
import React from 'react';
|
||
|
||
interface ControlsPanelProps {
|
||
panelOpen: boolean;
|
||
onTogglePanel: (next: boolean) => void;
|
||
mapStyleChoice: 'dark' | 'streets';
|
||
onChangeStyle: (v: 'dark' | 'streets') => void;
|
||
heatVisible: boolean;
|
||
onToggleHeat: (v: boolean) => void;
|
||
pointsVisible: boolean;
|
||
onTogglePoints: (v: boolean) => void;
|
||
heatRadius: number;
|
||
onChangeRadius: (v: number) => void;
|
||
heatIntensity: number;
|
||
onChangeIntensity: (v: number) => void;
|
||
}
|
||
|
||
export default function ControlsPanel({ panelOpen, onTogglePanel, mapStyleChoice, onChangeStyle, heatVisible, onToggleHeat, pointsVisible, onTogglePoints, heatRadius, onChangeRadius, heatIntensity, onChangeIntensity }: ControlsPanelProps) {
|
||
return (
|
||
<div className="map-control">
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
|
||
<div style={{ fontWeight: 700 }}>Map Controls</div>
|
||
<button aria-expanded={panelOpen} aria-label={panelOpen ? 'Collapse panel' : 'Expand panel'} onClick={() => onTogglePanel(!panelOpen)} style={{ borderRadius: 6, padding: '4px 8px' }}>{panelOpen ? '−' : '+'}</button>
|
||
</div>
|
||
|
||
{panelOpen && (
|
||
<>
|
||
<div className="mc-row">
|
||
<label className="mc-label">Style</label>
|
||
<select className="map-select" value={mapStyleChoice} onChange={(e) => onChangeStyle(e.target.value as 'dark' | 'streets')}>
|
||
<option value="dark">Dark</option>
|
||
<option value="streets">Streets</option>
|
||
</select>
|
||
</div>
|
||
<div className="mc-row">
|
||
<label className="mc-label">Heatmap</label>
|
||
<input type="checkbox" checked={heatVisible} onChange={(e) => onToggleHeat(e.target.checked)} />
|
||
</div>
|
||
|
||
<div className="mc-row">
|
||
<label className="mc-label">Points</label>
|
||
<input type="checkbox" checked={pointsVisible} onChange={(e) => onTogglePoints(e.target.checked)} />
|
||
</div>
|
||
|
||
<div style={{ marginBottom: 6 }}>
|
||
<label style={{ display: 'block', fontSize: 12 }}>Radius: {heatRadius}</label>
|
||
<input className="mc-range" type="range" min={5} max={100} value={heatRadius} onChange={(e) => onChangeRadius(Number(e.target.value))} style={{ width: '100%' }} />
|
||
</div>
|
||
|
||
<div style={{ marginBottom: 6 }}>
|
||
<label style={{ display: 'block', fontSize: 12 }}>Intensity: {heatIntensity}</label>
|
||
<input className="mc-range" type="range" min={0.1} max={5} step={0.1} value={heatIntensity} onChange={(e) => onChangeIntensity(Number(e.target.value))} style={{ width: '100%' }} />
|
||
</div>
|
||
|
||
<div style={{ fontSize: 11, opacity: 0.9 }}>Tip: switching style will reapply layers.</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|