3d788740cb
Includes room interior with floor, walls, glass you can see through, and all uncommitted production changes that were running live. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useConfiguratorStore } from "@/lib/store";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { User, Mail, Phone, MessageSquare } from "lucide-react";
|
|
|
|
export function StepContact() {
|
|
const { name, email, phone, note, setName, setEmail, setPhone, setNote } =
|
|
useConfiguratorStore();
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="mb-2 text-xl font-semibold">Contactgegevens</h2>
|
|
<p className="mb-6 text-sm text-muted-foreground">
|
|
Vul uw gegevens in zodat wij u een offerte kunnen sturen.
|
|
</p>
|
|
|
|
<div className="grid gap-5">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="flex items-center gap-2">
|
|
<User className="size-4 text-brand-orange" />
|
|
Naam
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
placeholder="Uw volledige naam"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="h-11 focus-visible:ring-brand-orange"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-5 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="flex items-center gap-2">
|
|
<Mail className="size-4 text-brand-orange" />
|
|
E-mail
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="naam@bedrijf.nl"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="h-11 focus-visible:ring-brand-orange"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone" className="flex items-center gap-2">
|
|
<Phone className="size-4 text-brand-orange" />
|
|
Telefoon
|
|
</Label>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder="06 1234 5678"
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
className="h-11 focus-visible:ring-brand-orange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="note" className="flex items-center gap-2">
|
|
<MessageSquare className="size-4 text-brand-orange" />
|
|
Opmerking
|
|
<span className="text-xs font-normal text-muted-foreground">(optioneel)</span>
|
|
</Label>
|
|
<textarea
|
|
id="note"
|
|
rows={3}
|
|
placeholder="Bijv. specifieke wensen, RAL-kleur, plaatsing..."
|
|
value={note}
|
|
onChange={(e) => setNote(e.target.value)}
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|