Untitled
unknown
plain_text
a month ago
6.5 kB
3
Indexable
import { useState } from "react"; import { ImShrink2 } from "react-icons/im"; import { RiCloseFill } from "react-icons/ri"; function CreateCarriers({ openCareerForm, setIsOpen }) { const [showDocFormBody, setShowDocFormBody] = useState(true); const [phoneNumbers, setPhoneNumbers] = useState([""]); // Stores multiple phone numbers const [emails, setEmails] = useState([""]); // Stores multiple emails const addPhoneNumber = () => { setPhoneNumbers([...phoneNumbers, ""]); }; const removePhoneNumber = (index) => { setPhoneNumbers(phoneNumbers.filter((_, i) => i !== index)); }; const addEmail = () => { setEmails([...emails, ""]); }; const removeEmail = (index) => { setEmails(emails.filter((_, i) => i !== index)); }; const handleSubmit = () => { console.log("Submitted"); }; return ( <div className="fixed bottom-0 z-20 right-0 flex items-center justify-center"> <div className="max-w-3xl max-h-[90vh] overflow-y-auto sm:min-w-xl xl:min-w-3xl w-full mx-auto bg-white border rounded-md shadow-lg"> <div className="py-2 sticky top-0 px-4 flex justify-between items-center text-white bg-[#313131] border-b"> <h4 className="font-medium text-base">New Carrier</h4> <div className="flex justify-center items-center gap-4"> <ImShrink2 onClick={() => setShowDocFormBody(!showDocFormBody)} className="text-lg cursor-pointer" /> <RiCloseFill onClick={() => setIsOpen(false)} className="text-xl cursor-pointer" /> </div> </div> <div className={`${showDocFormBody ? "block" : "hidden"}`}> <div className=""> <div className="p-4"> <h2 className="text-lg font-semibold mb-4">Carrier Details</h2> <div className="flex w-full gap-4"> <div className="flex-1 w-full"> {/* Carrier Name */} <div className="flex border-b border-gray-300"> <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100"> Carrier Name </div> <input type="text" placeholder="Carrier Name" className="w-2/3 p-2 border-none focus:ring-0 outline-none" /> </div> {/* DOT number*/} <div className="flex border-b border-gray-300"> <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100"> DOT Number </div> <input type="text" placeholder="DOT Number" className="w-2/3 p-2 border-none focus:ring-0 outline-none" /> </div> {/* MC Number */} <div className="flex border-b border-gray-300"> <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100"> MC Number </div> <input type="text" placeholder="MC number" className="w-2/3 p-2 border-none focus:ring-0 outline-none" /> </div> {/*SCAC Number */} <div className="flex border-b border-gray-300 mb-2"> <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100"> SCAC </div> <input type="text" placeholder="MC number" className="w-2/3 p-2 border-none focus:ring-0 outline-none" /> </div> {/* Notes */} <div className="flex border-b border-gray-300"> <div className="w-1/3 p-2 font-semibold bg-gray-100"> Notes </div> <textarea placeholder="Notes" className="w-2/3 p-2 border-none focus:ring-0 outline-none h-14" ></textarea> </div> </div> {/* Customer Section */} <div className="max-w-[220px] space-y-6 w-full"> <div className="border border-gray-200 w-full h-max p-4 rounded-md text-center"> <div className="text-xl">🏢</div> <p className="text-sm mt-2">Connect a Customer</p> <button className="text-black text-[11px] font-semibold mt-2"> ADD CUSTOMER </button> </div> <div className="border border-gray-200 w-full h-max p-4 rounded-md text-center"> <div className="text-xl">🏢</div> <p className="text-sm mt-2">Connect a Customer</p> <button className="text-black text-[11px] font-semibold mt-2"> ADD CUSTOMER </button> </div> <div className="border border-gray-200 w-full h-max p-4 rounded-md text-center"> <div className="text-xl">🏢</div> <p className="text-sm mt-2">Connect a Customer</p> <button className="text-black text-[11px] font-semibold mt-2"> ADD CUSTOMER </button> </div> </div> </div> </div> <div className="p-4 sticky bottom-0 flex justify-between bg-gray-100 rounded-b-lg"> <button onClick={() => setContactForm(false)} className="px-4 py-2 bg-gray-300 rounded-md" > BACK </button> <button onClick={handleSubmit} className="px-4 py-2 bg-orange-500 text-white rounded-md" > SUBMIT </button> </div> </div> </div> </div> </div> ); } export default CreateCarriers;
Editor is loading...
Leave a Comment