text: import React, { useState, useEffect } from 'react';
  
  import './styles.css';
  
  function DevForm({ onSubmit }) {
    const [github_username, setGithubUsername] = useState('');
    const [techs, setTechs] = useState('');
  
    const [latitude, setLatitude] = useState('');
    const [longitude, setLongitude] = useState('');
  
    useEffect(() => {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          const { latitude, longitude } = pos.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">Github Username</label>
          <input
            className="github_username"
            id="github_username"
            required
            onChange={e => setGithubUsername(e.target.value)}
          />
        </div>
  
        <div className="input-block">
          <label htmlFor="techs">Stack</label>
          <input
            className="techs"
            id="techs"
            required
            onChange={e => setTechs(e.target.value)}
          />
        </div>
  
        <div className="input-group">
          <div className="input-block">
            <label htmlFor="latitude">Latitude</label>
            <input
              type="number"
              className="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"
              className="longitude"
              id="longitude"
              required
              value={longitude}
              onChange={e => setLongitude(e.target.value)}
            />
          </div>
        </div>
        <button type="submit">Save</button>
      </form>
    )
  }
  
  export default DevForm;