| import React from 'react'; | |
| import { cn } from '@/lib/utils'; | |
| /** | |
| * Static preview of embed form fields (matches public embed styling). | |
| */ | |
| export default function CtaFormPreview({ fields, className }) { | |
| const list = fields || []; | |
| return ( | |
| <div className={cn('rounded-xl border border-slate-200 bg-white p-4', className)}> | |
| {list.length === 0 ? ( | |
| <p className="text-sm text-slate-400 text-center py-6">Add fields to preview</p> | |
| ) : ( | |
| <div className="space-y-3"> | |
| {list.map((f, idx) => ( | |
| <div key={`${f.key}-${idx}`}> | |
| <label className="block text-xs font-medium text-slate-600 mb-1"> | |
| {f.label} | |
| {f.required ? ' *' : ''} | |
| </label> | |
| {f.type === 'textarea' ? ( | |
| <textarea | |
| readOnly | |
| tabIndex={-1} | |
| rows={3} | |
| placeholder="" | |
| className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm bg-white pointer-events-none" | |
| /> | |
| ) : ( | |
| <input | |
| readOnly | |
| tabIndex={-1} | |
| type={f.type || 'text'} | |
| placeholder="" | |
| className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm bg-white pointer-events-none" | |
| /> | |
| )} | |
| </div> | |
| ))} | |
| <button | |
| type="button" | |
| tabIndex={-1} | |
| className="w-full rounded-lg bg-violet-600 py-2.5 text-sm font-semibold text-white pointer-events-none" | |
| > | |
| Submit | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |