Untitled
unknown
plain_text
5 months ago
3.0 kB
2
Indexable
import React from 'react'; type FormField = { label: string; id: string; type: string; }; const OwnerInformationForm: React.FC = () => { const formFields: FormField[] = [ { label: "Nome", id: "nome", type: "text" }, { label: "Cognome", id: "cognome", type: "text" }, { label: "Codice Fiscale", id: "cf", type: "text" }, { label: "Email", id: "email", type: "email" }, { label: "Provincia", id: "provincia", type: "text" }, { label: "Città", id: "citta", type: "text" }, ]; const formFieldShort: FormField[] = [ { label: "Via", id: "via", type: "text" }, { label: "Numero civico", id: "Ncivico", type: "text" }, { label: "CAP", id: "cap", type: "text" }, ]; return ( <form className="grid grid-cols-2 gap-6"> <div className="col-span-2"> <h2 className="text-2xl font-bold text-black">Informazioni Proprietario</h2> </div> {formFields.map(({ label, id, type }) => ( <div key={id} className="flex flex-wrap gap-4"> <label htmlFor={id} className="grow shrink my-auto w-[143px] text-4xl text-black">{label}</label> <div className="flex shrink-0 max-w-full bg-white rounded-lg border border-black border-solid h-[45px] w-[250px]"> <input type={type} id={id} className="w-full h-full px-4 rounded-3xl" aria-label={label} /> </div> </div> ))} <div className="grid grid-cols-3 gap-6 col-span-2"> {formFieldShort.map(({ label, id, type }) => ( <div key={id} className="flex flex-col gap-2 h-[85px]"> <label htmlFor={id} className="text-2xl text-black flex justify-center items-center">{label}</label> <div className="flex shrink-0 max-w-full bg-white rounded-lg border border-black border-solid h-[45px] w-[250px]"> <input type={type} id={id} className="w-full h-full px-4 rounded-3xl" aria-label={label} /> </div> </div> ))} </div> <div className="col-span-2 mt-6"> <span className="block text-lg text-black">Sei tu il proprietario?</span> <div className="mt-2 flex gap-6 items-center"> {["Sì", "No"].map((option) => ( <div key={option} className="flex items-center"> <input type="radio" id={`owner${option}`} name="owner" value={option.toLowerCase()} className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" /> <label htmlFor={`owner${option}`} className="ml-2 text-base text-black">{option}</label> </div> ))} </div> </div> </form> ); }; export default OwnerInformationForm;
Editor is loading...
Leave a Comment