57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import type { EmailTemplateDefinition, VariableField } from '../email/types'
|
|
|
|
function FieldInput({
|
|
field,
|
|
value,
|
|
onChange,
|
|
}: {
|
|
field: VariableField
|
|
value: string
|
|
onChange: (v: string) => void
|
|
}) {
|
|
const type = field.inputType ?? 'text'
|
|
|
|
return (
|
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
|
<span style={{ fontSize: 12, opacity: 0.8 }}>{field.label}</span>
|
|
<input
|
|
type={type === 'number' ? 'number' : type === 'date' ? 'date' : 'text'}
|
|
value={value}
|
|
placeholder={field.placeholder || ''}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
|
/>
|
|
</label>
|
|
)
|
|
}
|
|
|
|
export function VariablesForm({
|
|
template,
|
|
data,
|
|
onChange,
|
|
}: {
|
|
template: EmailTemplateDefinition
|
|
data: Record<string, string>
|
|
onChange: (next: Record<string, string>) => void
|
|
}) {
|
|
return (
|
|
<div style={{ display: 'grid', gap: 12 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
|
<h2 style={{ margin: 0, fontSize: 14 }}>Template variables</h2>
|
|
<div style={{ fontSize: 12, opacity: 0.7 }}>{template.variables.length} fields</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
|
|
{template.variables.map((f) => (
|
|
<FieldInput
|
|
key={f.key}
|
|
field={f}
|
|
value={data[f.key] ?? ''}
|
|
onChange={(v) => onChange({ ...data, [f.key]: v })}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|