Untitled

import React ,{useState} from 'react'
import { doc, setDoc } from "firebase/firestore";
import { auth , db} from '../../firebase';
import { collection, query, getDocs } from "firebase/firestore";
import "./industry.css";
export default function Postjob() {
    const [details, setDetails] = useState({
        position: "",
        vacancy: "",
        salary:"",
        requirment: "",
       who:"",
    });

    const handleChange = (e) => {
        setDetails({
            ...details,
            [e.target.name]: e.target.value,
        });
    };

    const handleSubmit = async () => {

        const q = query(collection(db, "Industry"));
        const querySnapshot = await getDocs(q);
        const queryData = querySnapshot.docs.map((detail) => ({
            ...detail.data(),
            id: detail.id,
            
        }));
    //     console.log("heheh " );
    //    alert(queryData);
       console.log(querySnapshot);
       
        await setDoc(doc(db, `Industry/${auth.currentUser.uid}/more-details`, details.position), {
            position: details.position,
            vacancy: details.vacancy,
            salary : details.salary,
            requirment: details. requirment,
            
                }
                
                )
    };
  return (
    <section className="signup-body">
            <div className="container px-5 py-24 mx-auto">
                <div className="lg:w-1/2 md:w-2/3 mx-auto flex  flex-col items-center">
                    <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 ">
                        Post New Job
                    </h1>
                    <div className="flex flex-wrap -m-2">
                        <div className="p-2 w-1/2">
                            <div className="relative">
                                <label className="leading-7 text-sm">Position Name</label>
                                <input
                                    type="text"
                                    id="position"
                                    value={details.position}
                                    onChange={handleChange}
                                    name="position"
                                    className="w-full bg-opacity-40 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                                />
                            </div>
                        </div>
                        <div className="p-2 w-1/2">
                            <div className="relative">
                                <label className="leading-7 text-sm">Vacancy</label>
                                <input
                                    type="text"
                                    value={details.vacancy}
                                    onChange={handleChange}
                                    id="vacancy"
                                    name="vacancy"
                                    className="w-full bg-opacity-40 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                                />
                            </div> 
                        </div>
                        <div className="p-2 w-1/2">
                            <div className="relative">
                                <label className="leading-7 text-sm">Salary</label>
                                <input
                                    type="text"
                                    value={details.salary}
                                    onChange={handleChange}
                                    id="salary"
                                    name="salary"
                                    className="w-full bg-opacity-40 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                                />
                            </div>
                        </div>
                        <div className="p-2 w-full">
                            <div className="relative">
                                <label className="leading-7 text-sm">Job requirment</label>
                                <textarea
                                    id="requirment"
                                    value={details. requirment}
                                    onChange={handleChange}
                                    name="requirment"
                                    className="w-full bg-opacity-40 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
                                ></textarea>
                            </div>
                        </div>
                        <div className="p-2 w-full">
                            <button
                                onClick={handleSubmit}
                                className="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg"
                            >
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
  )
}