text: import React, { useState, useEffect } from 'react';
  
  function DevForm({ onSubmit }) {
      const [github_username, setGithubUsername] = useState('');
      const [techs, setTechs] = useState('');
      const [latitude, setLatitude] = useState('');
      const [longitude, setLongitude] = useState('');
  
      useEffect(() => {
          navigator.geolocation.getCurrentPosition(
            (position) => {
              const { latitude, longitude } = position.coords;
      
              setLatitude(latitude);
              setLongitude(longitude);
            },
            (err) => {
              console.log(err);
            },
            {
              timeout: 30000,
            }
            )
        }, []);
  
        async function handleSubmit(e) {
          e.preventDefault();
  
          await onSubmit({
              github_username,
              techs,
              latitude,
              longitude,
          });
  
          setGithubUsername('');
          setTechs('');
        }
  
      return (
          <form onSubmit={handleSubmit}>
          <div className="input-block">
            <label htmlFor="github_username">Usuário do Github</label>
            <input 
            name="github_username" 
            id="github_username" 
            required 
            value={github_username}
            onChange={e => setGithubUsername(e.target.value)}
            />
          </div>
  
          <div className="input-block">
            <label htmlFor="techs">Tecnologias</label>
            <input 
            name="techs" 
            id="techs" 
            required 
            value={techs}
            onChange={e => setTechs(e.target.value)}
            />
          </div>
          <div className="input-group">
            <div className="input-block">
              <label htmlFor="latitude">Latitude</label>
              <input 
              type="number" 
              name="latitude" 
              id="latitude" 
              required 
              value={latitude}
              onChange={e => setLatitude(e.target.value)}
              />
            </div>
            <div className="input-block">
              <label htmlFor="longitude">Longitude</label>
              <input 
              type="number" 
              name="longitude" 
              id="longitude" 
              required 
              value={longitude}
              onChange={e => setLongitude(e.target.value)}
              />
            </div>
          </div>
  
          <button type="submit">Salvar</button>
        </form>
      );
  }
  
  export default DevForm;