text: import React, { useState, useEffect } from "react";
  import "./Contact.css";
  import { db } from "./firebase";
  // import Button from '../components/Button.js';
  import 'bootstrap/dist/css/bootstrap.css';
  
  const Contact = () => {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState("");
  
    const [loader, setLoader] = useState(false);
  
    const handleSubmit = (e) => {
      e.preventDefault();
      setLoader(true);
  
      db.collection("contacts")
        .add({
          name: name,
          email: email,
          message: message,
        })
        .then(() => {
          setLoader(false);
          alert("Your message has been submitted👍");
        })
        .catch((error) => {
          alert(error.message);
          setLoader(false);
        });
  
      setName("");
      setEmail("");
      setMessage("");
    };
  
    return (
      
      <form className="form" onSubmit={handleSubmit}>
         
         <div className="head">
          Contact Us.
          <div class="hero-text"> 
          <ul>
          <li>Pranav Hegde - hegdepranav2@gmail.com</li>
          <li>Kumar Hegde - Kumarhegde76@gmail.com</li>
          <li>Sandeep AD - sandeepad3118@gmail.com</li>
          </ul>   
          </div>  
        </div>
        <h3 align="center">Got any Questions? Feel free to ask</h3>
        {/* <label>Name</label> */}
        <input
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
  
        {/* <label>Email</label> */}
        <input
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
  
        {/* <label>Message</label> */}
        <textarea
          placeholder="Message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        ></textarea>
  
        <button
        type="submit"
        style={{ background: loader ? "#ccc" : " rgb(2, 2, 110)" }}
     >
          Submit
        </button>
      </form>
    );
  };
  
  export default Contact;