🎉 initial commit
This commit is contained in:
Lukas Harat
@@ -0,0 +1,249 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, useRouter } from '@tanstack/react-router'
|
||||
|
||||
import { SiteFooter } from '#/components/site-footer'
|
||||
import { SiteHeader } from '#/components/site-header'
|
||||
import { createReservation, getTables } from '#/lib/reservations'
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
component: Home,
|
||||
loader: async () => {
|
||||
const tables = await getTables()
|
||||
return { tables }
|
||||
},
|
||||
})
|
||||
|
||||
const OPENING_HOURS = [
|
||||
{ day: 'Montag', hours: null },
|
||||
{ day: 'Dienstag', hours: ['17:00 – 21:30'] },
|
||||
{ day: 'Mittwoch', hours: ['17:00 – 21:30'] },
|
||||
{ day: 'Donnerstag', hours: ['17:00 – 21:30'] },
|
||||
{ day: 'Freitag', hours: ['17:00 – 22:00'] },
|
||||
{ day: 'Samstag', hours: ['17:00 – 22:00'] },
|
||||
{ day: 'Sonntag', hours: ['11:30 – 13:30', '17:00 – 22:00'] },
|
||||
]
|
||||
|
||||
function formatDateTimeLocal(date: Date) {
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`
|
||||
}
|
||||
|
||||
function FlameIcon() {
|
||||
return (
|
||||
<svg className="hero-flame" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M12 2c1 3-3 4-3 7.5A3.5 3.5 0 0 0 12 13a3.5 3.5 0 0 0 3-5.3c1.5 1 2.5 3 2.5 5a5.5 5.5 0 1 1-11 0C6.5 8.5 9.5 6 12 2Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.4"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function Home() {
|
||||
const router = useRouter()
|
||||
const { tables } = Route.useLoaderData()
|
||||
|
||||
const [tableId, setTableId] = useState<number | string>(tables[0]?.id ?? '')
|
||||
const [customerName, setCustomerName] = useState('')
|
||||
const [customerEmail, setCustomerEmail] = useState('')
|
||||
const [partySize, setPartySize] = useState(2)
|
||||
const [reservationTime, setReservationTime] = useState(() =>
|
||||
formatDateTimeLocal(new Date(Date.now() + 60 * 60 * 1000)),
|
||||
)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const todayName = new Date().toLocaleDateString('de-DE', { weekday: 'long' })
|
||||
|
||||
async function handleSubmit(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
if (!tableId) {
|
||||
setError('Bitte wählen Sie einen Tisch aus')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
await createReservation({
|
||||
data: {
|
||||
tableId: Number(tableId),
|
||||
customerName,
|
||||
customerEmail,
|
||||
partySize: Number(partySize),
|
||||
reservationTime: new Date(reservationTime).toISOString(),
|
||||
},
|
||||
})
|
||||
|
||||
setSuccess('Vielen Dank! Ihre Reservierung ist bestätigt.')
|
||||
setCustomerName('')
|
||||
setCustomerEmail('')
|
||||
setPartySize(2)
|
||||
await router.invalidate()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SiteHeader />
|
||||
|
||||
<section className="hero" id="top">
|
||||
<FlameIcon />
|
||||
<h1>
|
||||
Steakhaus <span>bei Mirko</span>
|
||||
</h1>
|
||||
<p>
|
||||
Steaks vom Grill, gute Gesellschaft und ein gemütlicher Abend mitten in Meppen. Reservieren
|
||||
Sie Ihren Tisch – wir freuen uns auf Sie.
|
||||
</p>
|
||||
<div className="hero-actions">
|
||||
<a className="btn btn-primary" href="#reservieren">
|
||||
Tisch reservieren
|
||||
</a>
|
||||
<a className="btn btn-secondary" href="#oeffnungszeiten">
|
||||
Öffnungszeiten
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main className="page">
|
||||
<section className="section" id="oeffnungszeiten">
|
||||
<div className="section-grid">
|
||||
<div>
|
||||
<span className="section-kicker">Wann wir für Sie da sind</span>
|
||||
<h2 className="section-heading">Öffnungszeiten</h2>
|
||||
</div>
|
||||
<ul className="hours-list">
|
||||
{OPENING_HOURS.map(({ day, hours }) => (
|
||||
<li key={day} className={day === todayName ? 'today' : undefined}>
|
||||
<span className="day">{day}</span>
|
||||
{hours ? (
|
||||
<span>{hours.join(' · ')}</span>
|
||||
) : (
|
||||
<span className="hours-closed">geschlossen</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section" id="reservieren">
|
||||
<div className="section-grid">
|
||||
<div>
|
||||
<span className="section-kicker">Wir freuen uns auf Sie</span>
|
||||
<h2 className="section-heading">Tisch reservieren</h2>
|
||||
</div>
|
||||
|
||||
<form className="reservation-form" onSubmit={handleSubmit}>
|
||||
<label>
|
||||
Tisch
|
||||
<select value={tableId} onChange={(e) => setTableId(e.target.value)} required>
|
||||
<option value="" disabled>
|
||||
Tisch auswählen
|
||||
</option>
|
||||
{tables.map((table) => (
|
||||
<option key={table.id} value={table.id}>
|
||||
{table.name} ({table.seats} Plätze)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div className="form-row">
|
||||
<label>
|
||||
Name
|
||||
<input
|
||||
type="text"
|
||||
value={customerName}
|
||||
onChange={(e) => setCustomerName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
E-Mail
|
||||
<input
|
||||
type="email"
|
||||
value={customerEmail}
|
||||
onChange={(e) => setCustomerEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<label>
|
||||
Anzahl Personen
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={20}
|
||||
value={partySize}
|
||||
onChange={(e) => setPartySize(Number(e.target.value))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Datum & Uhrzeit
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={reservationTime}
|
||||
onChange={(e) => setReservationTime(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Wird gebucht …' : 'Jetzt reservieren'}
|
||||
</button>
|
||||
|
||||
{error && <p className="message message-error">{error}</p>}
|
||||
{success && <p className="message message-success">{success}</p>}
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section" id="kontakt">
|
||||
<div className="section-grid">
|
||||
<div>
|
||||
<span className="section-kicker">Hier finden Sie uns</span>
|
||||
<h2 className="section-heading">Kontakt</h2>
|
||||
</div>
|
||||
<ul className="contact-list">
|
||||
<li>
|
||||
<span className="label">Adresse</span>
|
||||
<span>
|
||||
Meppener Straße 8
|
||||
<br />
|
||||
49716 Meppen
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="label">Telefon</span>
|
||||
<a href="tel:+49593112750">05931 - 12750</a>
|
||||
</li>
|
||||
<li>
|
||||
<span className="label">E-Mail</span>
|
||||
<a href="mailto:info@steakhaus-meppen.de">info@steakhaus-meppen.de</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<SiteFooter />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user