Untitled
unknown
plain_text
5 months ago
3.0 kB
3
Indexable
import React from 'react'; type FormField = { label: string; id: string; type: string; }; const PetInformationForm: React.FC = () => { const formFields: FormField[] = [ { label: "Name", id: "name", type: "text" }, { label: "Età", id: "eta", type: "text" }, { label: "Genere", id: "genere", type: "text" }, { label: "Razza", id: "razza", type: "text" }, { label: "Numero Microchip", id: "microchip", type: "text" }, ]; const formFieldShort: FormField[] = [ { label: "Provincia", id: "provincia", type: "text" }, { label: "Comune", id: "comune", type: "text" }, ]; return ( <form className="grid grid-cols-2 gap-6"> <div className="col-span-2"> <h2 className="text-2xl font-bold text-black">Pet Information</h2> </div> {formFields.map(({ label, id, type }) => ( <div key={id} className={`flex flex-wrap gap-4 ${id === "microchip" ? "col-span-2" : ""}`}> <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] ${id === "microchip" ? "w-[500px]" : "w-[250px]"}`}> <input type={type} id={id} className={`w-full h-full px-4 rounded-lg ${id === "microchip" ? "w-full" : ""}`} 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-3xl 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-lg" aria-label={label} /> </div> </div> ))} </div> <div className="col-span-2 mt-6"> <span className="block text-lg text-black">Sterilizzato?</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 PetInformationForm;
Editor is loading...
Leave a Comment