konnosDashboard
Confirmation.tsx67 lines · main
1import type { BookingConfirmation } from './types'
2
3interface ConfirmationProps {
4 confirmation: BookingConfirmation
5 timezone: string
6}
7
8export default function Confirmation({ confirmation, timezone }: ConfirmationProps) {
9 const startDate = new Date(confirmation.start)
10 const endDate = new Date(confirmation.end)
11
12 const dateLabel = startDate.toLocaleDateString('en-US', {
13 weekday: 'long',
14 month: 'long',
15 day: 'numeric',
16 year: 'numeric',
17 timeZone: timezone,
18 })
19
20 const timeLabel = `${startDate.toLocaleTimeString('en-US', {
21 hour: 'numeric',
22 minute: '2-digit',
23 timeZone: timezone,
24 })} – ${endDate.toLocaleTimeString('en-US', {
25 hour: 'numeric',
26 minute: '2-digit',
27 timeZone: timezone,
28 })}`
29
30 return (
31 <div className="w-full text-center flex flex-col items-center gap-4">
32 <div className="w-12 h-12 rounded-full bg-brand-500/10 flex items-center justify-center">
33 <svg
34 width="24"
35 height="24"
36 viewBox="0 0 24 24"
37 fill="none"
38 xmlns="http://www.w3.org/2000/svg"
39 >
40 <path
41 d="M20 6L9 17L4 12"
42 stroke="currentColor"
43 strokeWidth="2"
44 strokeLinecap="round"
45 strokeLinejoin="round"
46 className="text-brand-500"
47 />
48 </svg>
49 </div>
50
51 <div className="flex flex-col gap-1">
52 <h3 className="text-foreground text-lg font-medium">Meeting confirmed</h3>
53 <p className="text-foreground-lighter text-sm">
54 You'll receive a calendar invitation at your email.
55 </p>
56 </div>
57
58 <div className="bg-surface-100 border border-muted rounded-lg px-6 py-4 flex flex-col gap-1 w-full max-w-sm">
59 <p className="text-foreground font-medium text-sm">{dateLabel}</p>
60 <p className="text-foreground-lighter text-sm">{timeLabel}</p>
61 {confirmation.location && (
62 <p className="text-foreground-lighter text-sm mt-1">{confirmation.location}</p>
63 )}
64 </div>
65 </div>
66 )
67}