TicketForm() — astro Function Reference

Architecture documentation for the TicketForm() function in _Ticket.tsx from the astro codebase.

Function tsx CoreAstro RoutingSystem

Entity Profile

CoreAstro→ RoutingSystem→ TicketForm() — astro Function Reference

Dependency Diagram

graph TD
  73517b8d_da4d_024e_6b03_4627f04a9526["TicketForm()"]
  a5929905_a7c2_240f_3079_bacf2ad2ad3d["_Ticket.tsx"]
  73517b8d_da4d_024e_6b03_4627f04a9526 -->|defined in| a5929905_a7c2_240f_3079_bacf2ad2ad3d
  style 73517b8d_da4d_024e_6b03_4627f04a9526 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/db/test/fixtures/ticketing-example/src/pages/[event]/_Ticket.tsx lines 12–40

export function TicketForm({ price }: { price: number }) {
	const [quantity, setQuantity] = useState(1);
	return (
		<>
			<Form validator={ticketForm.validator}>
				<h3>${(quantity * price) / 100}</h3>

				<label htmlFor="quantity">Quantity</label>
				<Input
					id="quantity"
					{...ticketForm.inputProps.quantity}
					onInput={(e) => {
						const value = Number(e.currentTarget.value);
						setQuantity(value);
					}}
				/>

				<label htmlFor="email">Email</label>
				<Input id="email" {...ticketForm.inputProps.email} />

				<div className="newsletter">
					<Input id="newsletter" {...ticketForm.inputProps.newsletter} />
					<label htmlFor="newsletter">Hear about the next event in your area</label>
				</div>
				<button>Buy tickets</button>
			</Form>
		</>
	);
}