tanshu
7b070fde81
- TanStack Start (React 19, Tailwind 4) frontend recreated from Stitch design - PocketBase backend with schema migration + idempotent content seed - Single Docker image running both services (non-root, healthchecked) - deploy.sh to build & push to registry.tanshu.com - Ansible playbook (roles: app, caddy) deploying to www.greatbear.in with Caddy TLS entries for the site and the PocketBase admin
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import * as React from 'react'
|
|
import { createReservation } from '~/lib/data'
|
|
|
|
export function QuickReserveForm() {
|
|
const [name, setName] = React.useState('')
|
|
const [phone, setPhone] = React.useState('')
|
|
const [status, setStatus] = React.useState<'idle' | 'sending' | 'done' | 'error'>('idle')
|
|
|
|
async function handleSubmit(event: React.FormEvent) {
|
|
event.preventDefault()
|
|
setStatus('sending')
|
|
try {
|
|
await createReservation({ data: { name, phone, source: 'quick' } })
|
|
setStatus('done')
|
|
setName('')
|
|
setPhone('')
|
|
} catch {
|
|
setStatus('error')
|
|
}
|
|
}
|
|
|
|
if (status === 'done') {
|
|
return (
|
|
<div className="flex items-center justify-center gap-space-sm rounded-xl bg-surface-container p-space-lg text-body-md text-primary">
|
|
<span className="material-symbols-outlined">check_circle</span>
|
|
Reservation request received! We will contact you shortly.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<form
|
|
className="flex flex-col gap-space-md rounded-xl bg-surface-container p-space-lg md:flex-row"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<input
|
|
className="flex-1 rounded bg-surface-container-highest px-space-md py-space-sm text-on-surface placeholder:text-on-surface-variant/50 focus:outline-none focus:ring-1 focus:ring-primary"
|
|
placeholder="Your Name"
|
|
required
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
/>
|
|
<input
|
|
className="flex-1 rounded bg-surface-container-highest px-space-md py-space-sm text-on-surface placeholder:text-on-surface-variant/50 focus:outline-none focus:ring-1 focus:ring-primary"
|
|
placeholder="Phone Number"
|
|
required
|
|
type="tel"
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
/>
|
|
<button
|
|
className="rounded bg-primary px-space-lg py-space-sm font-label-lg text-on-primary transition-all hover:bg-primary-container"
|
|
type="submit"
|
|
disabled={status === 'sending'}
|
|
>
|
|
{status === 'sending' ? 'Booking…' : 'Book Table'}
|
|
</button>
|
|
{status === 'error' ? (
|
|
<p className="text-body-sm text-error md:hidden">
|
|
Something went wrong — please call us instead.
|
|
</p>
|
|
) : null}
|
|
</form>
|
|
)
|
|
}
|