Form section

import {
	FormLayout,
	Panel,
	PanelDescription,
	PanelHeader,
	PanelSection,
	PanelTitle,
	TextField,
} from '@customerio/pluma-components/react';

type InputHandler = (event: Event & { target: HTMLInputElement }) => void;

export interface FormSectionProps {
	/** The name recipients see in their inbox. */
	fromName: string;
	/** The address messages are sent from. */
	fromAddress: string;
	/** Where replies go. Empty means replies go to the from address. */
	replyToAddress: string;
	/** Called on every edit of the from name. */
	onFromNameInput: InputHandler;
	/** Called on every edit of the from address. */
	onFromAddressInput: InputHandler;
	/** Called on every edit of the reply-to address. */
	onReplyToAddressInput: InputHandler;
}

export function FormSection({
	fromName,
	fromAddress,
	replyToAddress,
	onFromNameInput,
	onFromAddressInput,
	onReplyToAddressInput,
}: FormSectionProps) {
	return (
		<Panel>
			<PanelHeader>
				<PanelTitle>Sender details</PanelTitle>
				<PanelDescription>Choose who your messages come from and where replies go.</PanelDescription>
			</PanelHeader>
			<PanelSection>
				<FormLayout>
					<TextField
						label="From name"
						description="Recipients see this name in their inbox."
						value={fromName}
						onInput={onFromNameInput}
					/>
					<TextField
						label="From address"
						type="email"
						description="Use an address on a verified sending domain."
						value={fromAddress}
						onInput={onFromAddressInput}
					/>
					<TextField
						label="Reply-to address (optional)"
						type="email"
						description="Replies go to the from address when this is empty."
						value={replyToAddress}
						onInput={onReplyToAddressInput}
					/>
				</FormLayout>
			</PanelSection>
		</Panel>
	);
}

pluma-cli scaffold form-section <dest-dir> --framework react