0899e6ae9a
- Initialize Next.js project with Tailwind CSS - Create CiviCRM APIv4 integration layer - Implement stage-based form visibility (stages 0-5) - Add field mapping configuration for CRM-to-form linking - Create API routes for data retrieval and submission - Record form submissions as CiviCRM activities - Support dynamic contactId and orgId via URL parameters - Ensure robust form state management with react-hook-form Co-authored-by: joelbrock <52835+joelbrock@users.noreply.github.com>
24 lines
779 B
JavaScript
24 lines
779 B
JavaScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
export default function FieldSet({ fields, register }) {
|
|
return (
|
|
<div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4 bg-white border-x border-b rounded-b-lg -mt-4 mb-4">
|
|
{fields.map((field) => (
|
|
<div key={field.name} className="flex flex-col">
|
|
<label htmlFor={field.name} className="text-sm font-medium text-gray-700 mb-1">
|
|
{field.label}
|
|
</label>
|
|
<input
|
|
id={field.name}
|
|
{...register(field.name)}
|
|
className="border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none transition"
|
|
placeholder={`Enter ${field.label.toLowerCase()}`}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|