Skip to content

Commit a48e0c5

Browse files
Copilotrezwana-karim
Copilot
and
rezwana-karim
committed
Add dynamic event information to Save the Date section
Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
1 parent 7bb5ef5 commit a48e0c5

File tree

3 files changed

+145
-58
lines changed

3 files changed

+145
-58
lines changed

‎client/src/app/page.tsx‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import Link from "next/link";
24
import Image from "next/image";
35
import Navigation from "@/components/layout/Navigation";
@@ -6,8 +8,10 @@ import Countdown from "@/components/Countdown";
68
import HeartCollage from "@/components/HeartCollage";
79
import { assetUrl } from "@/lib/utils";
810
import { ArrowRightIcon, HeartIcon, CalendarDaysIcon, PhotoIcon, MapPinIcon, EnvelopeIcon, GlobeAmericasIcon, TrophyIcon } from '@heroicons/react/24/outline'
11+
import { useWeddingEvents } from "@/hooks/useWeddingEvents";
912

1013
export default function HomePage() {
14+
const { currentEvent, allEventsCompleted } = useWeddingEvents();
1115
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://sharothee-wedding.vercel.app';
1216

1317
// JSON-LD structured data for SEO
@@ -94,18 +98,53 @@ export default function HomePage() {
9498
Save the Date
9599
</h3>
96100
</div>
97-
<p className="text-2xl sm:text-3xl font-light text-secondary mb-3">
98-
December 16, 2025
99-
</p>
100-
<p className="text-sm text-muted mb-4">Tuesday • Starts at 6:00 PM</p>
101+
{allEventsCompleted ? (
102+
<>
103+
<p className="text-2xl sm:text-3xl font-light text-secondary mb-3">
104+
December 16-18, 2025
105+
</p>
106+
<p className="text-sm text-muted mb-4">All Events Completed</p>
107+
</>
108+
) : currentEvent ? (
109+
<>
110+
<p className="text-2xl sm:text-3xl font-light text-secondary mb-3">
111+
{currentEvent.displayDate}
112+
</p>
113+
<p className="text-sm text-muted mb-4">{currentEvent.displayTime}</p>
114+
</>
115+
) : (
116+
<>
117+
<p className="text-2xl sm:text-3xl font-light text-secondary mb-3">
118+
December 16, 2025
119+
</p>
120+
<p className="text-sm text-muted mb-4">Tuesday • Starts at 6:00 PM</p>
121+
</>
122+
)}
101123
{/* Countdown Timer */}
102124
<Countdown className="mb-4" />
103-
<p className="text-muted font-medium">
104-
Dhaka, Bangladesh
105-
</p>
106-
<p className="text-sm text-muted mt-1">
107-
After-party in Phu Quoc, Vietnam
108-
</p>
125+
{allEventsCompleted ? (
126+
<>
127+
<p className="text-muted font-medium">
128+
Dhaka, Bangladesh
129+
</p>
130+
<p className="text-sm text-muted mt-1">
131+
After-party in Phu Quoc, Vietnam
132+
</p>
133+
</>
134+
) : currentEvent ? (
135+
<p className="text-muted font-medium">
136+
{currentEvent.location}
137+
</p>
138+
) : (
139+
<>
140+
<p className="text-muted font-medium">
141+
Dhaka, Bangladesh
142+
</p>
143+
<p className="text-sm text-muted mt-1">
144+
After-party in Phu Quoc, Vietnam
145+
</p>
146+
</>
147+
)}
109148
</div>
110149

111150
{/* CTA Buttons */}

‎client/src/components/Countdown.tsx‎

Lines changed: 8 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use client';
22

3-
import { useState, useEffect, useMemo } from 'react';
3+
import { useState, useEffect } from 'react';
44
import { HeartIcon } from '@heroicons/react/24/outline'
5+
import { useWeddingEvents } from '@/hooks/useWeddingEvents';
56

67
interface TimeLeft {
78
days: number;
@@ -10,12 +11,6 @@ interface TimeLeft {
1011
seconds: number;
1112
}
1213

13-
interface WeddingEvent {
14-
name: string;
15-
date: string;
16-
message: string;
17-
}
18-
1914
interface CountdownProps {
2015
className?: string;
2116
}
@@ -27,53 +22,18 @@ export default function Countdown({ className = '' }: CountdownProps) {
2722
minutes: 0,
2823
seconds: 0
2924
});
30-
const [currentEvent, setCurrentEvent] = useState<WeddingEvent | null>(null);
31-
const [allEventsCompleted, setAllEventsCompleted] = useState(false);
32-
33-
// Define all wedding events in chronological order
34-
const weddingEvents: WeddingEvent[] = useMemo(() => [
35-
{
36-
name: 'Holud',
37-
date: '2025-12-16T16:00:00+06:00', // December 16, 4:00 PM
38-
message: 'Until the Holud Ceremony'
39-
},
40-
{
41-
name: 'Akdh',
42-
date: '2025-12-17T19:00:00+06:00', // December 17, 7:00 PM
43-
message: 'Until the Wedding Ceremony'
44-
},
45-
{
46-
name: 'Grand Reception',
47-
date: '2025-12-18T19:00:00+06:00', // December 18, 7:00 PM
48-
message: 'Until the Grand Reception'
49-
}
50-
], []);
25+
26+
const { currentEvent, allEventsCompleted } = useWeddingEvents();
5127

5228
useEffect(() => {
5329
const calculateTimeLeft = () => {
54-
const now = new Date().getTime();
55-
56-
// Find the next upcoming event
57-
let nextEvent: WeddingEvent | null = null;
58-
for (const event of weddingEvents) {
59-
const eventTime = new Date(event.date).getTime();
60-
if (eventTime > now) {
61-
nextEvent = event;
62-
break;
63-
}
64-
}
65-
66-
// If no upcoming events, all events are completed
67-
if (!nextEvent) {
68-
setAllEventsCompleted(true);
69-
setCurrentEvent(null);
30+
if (!currentEvent) {
7031
setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
7132
return;
7233
}
7334

74-
// Calculate time remaining to next event
75-
setCurrentEvent(nextEvent);
76-
const target = new Date(nextEvent.date).getTime();
35+
const now = new Date().getTime();
36+
const target = new Date(currentEvent.date).getTime();
7737
const difference = target - now;
7838

7939
if (difference <= 0) {
@@ -97,7 +57,7 @@ export default function Countdown({ className = '' }: CountdownProps) {
9757
const timer = setInterval(calculateTimeLeft, 1000);
9858

9959
return () => clearInterval(timer);
100-
}, [weddingEvents]);
60+
}, [currentEvent]);
10161

10262
if (allEventsCompleted) {
10363
return (

‎client/src/hooks/useWeddingEvents.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
'use client';
2+
3+
import { useState, useEffect, useMemo } from 'react';
4+
5+
export interface WeddingEvent {
6+
name: string;
7+
date: string;
8+
displayDate: string; // e.g., "December 16, 2025"
9+
displayTime: string; // e.g., "Tuesday • Starts at 4:00 PM"
10+
location: string;
11+
venue: string;
12+
message: string;
13+
}
14+
15+
export function useWeddingEvents() {
16+
const [currentEvent, setCurrentEvent] = useState<WeddingEvent | null>(null);
17+
const [allEventsCompleted, setAllEventsCompleted] = useState(false);
18+
19+
// Define all wedding events in chronological order
20+
const weddingEvents: WeddingEvent[] = useMemo(() => [
21+
{
22+
name: 'Holud',
23+
date: '2025-12-16T16:00:00+06:00', // December 16, 4:00 PM
24+
displayDate: 'December 16, 2025',
25+
displayTime: 'Tuesday • Starts at 4:00 PM',
26+
location: 'Dhaka, Bangladesh',
27+
venue: 'Fortis Platinum Lounge',
28+
message: 'Until the Holud Ceremony'
29+
},
30+
{
31+
name: 'Akdh',
32+
date: '2025-12-17T19:00:00+06:00', // December 17, 7:00 PM
33+
displayDate: 'December 17, 2025',
34+
displayTime: 'Wednesday • Starts at 7:00 PM',
35+
location: 'Dhaka, Bangladesh',
36+
venue: 'Sheraton Dhaka',
37+
message: 'Until the Wedding Ceremony'
38+
},
39+
{
40+
name: 'Grand Reception',
41+
date: '2025-12-18T19:00:00+06:00', // December 18, 7:00 PM
42+
displayDate: 'December 18, 2025',
43+
displayTime: 'Thursday • Starts at 7:00 PM',
44+
location: 'Dhaka, Bangladesh',
45+
venue: 'Bangladesh-China Friendship Conference Centre',
46+
message: 'Until the Grand Reception'
47+
}
48+
], []);
49+
50+
useEffect(() => {
51+
const updateCurrentEvent = () => {
52+
const now = new Date().getTime();
53+
54+
// Find the next upcoming event
55+
let nextEvent: WeddingEvent | null = null;
56+
for (const event of weddingEvents) {
57+
const eventTime = new Date(event.date).getTime();
58+
if (eventTime > now) {
59+
nextEvent = event;
60+
break;
61+
}
62+
}
63+
64+
// If no upcoming events, all events are completed
65+
if (!nextEvent) {
66+
setAllEventsCompleted(true);
67+
setCurrentEvent(null);
68+
} else {
69+
setAllEventsCompleted(false);
70+
setCurrentEvent(nextEvent);
71+
}
72+
};
73+
74+
// Update immediately
75+
updateCurrentEvent();
76+
77+
// Update every minute to check for event transitions
78+
const timer = setInterval(updateCurrentEvent, 60000);
79+
80+
return () => clearInterval(timer);
81+
}, [weddingEvents]);
82+
83+
return {
84+
currentEvent,
85+
allEventsCompleted,
86+
weddingEvents
87+
};
88+
}

0 commit comments

Comments
 (0)