Function MapsKeySetup

src/components/MapsKeySetup.jsx:6–109

({ compact = false, onSaved })

import './MapsKeySetup.css';

export default function MapsKeySetup({ compact = false, onSaved }) {
  const { setGoogleMapsApiKey, googleMapsApiKeySource, setMapProvider } =
    useAppConfig();
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleUseOSM = async () => {
    await setMapProvider('osm');
    onSaved?.();
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const trimmed = value.trim();
    if (!trimmed) {
      setError('Paste your Google Maps API key first.');
      return;
    }
    setGoogleMapsApiKey(trimmed);
    setValue('');
    setError('');
    onSaved?.();
  };

  return (
    <div className={`maps-setup ${compact ? 'compact' : ''}`}>
      <div className="maps-setup-card">
        <div className="maps-setup-icon">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z" />
            <circle cx="12" cy="10" r="3" />
          </svg>
        </div>
        <h2>Connect Google Maps</h2>
        <p className="maps-setup-sub">
          The map needs a Google Maps JavaScript API key. Your key stays on this
          device — it never gets sent anywhere or stored in project files.
        </p>

        <form onSubmit={handleSubmit} className="maps-setup-form">
          <label htmlFor="gmaps-key">Google Maps API key</label>
          <input
            id="gmaps-key"
            type="text"
            autoComplete="off"
            spellCheck="false"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="AIza..."
          />
          {error && <div className="maps-setup-error">{error}</div>}
          <div className="maps-setup-actions">
            <button type="submit" className="btn btn-primary">
              Save key
            </button>
          </div>
        </form>