Skip to content

Commit 18d3cc7

Browse files
coding-junctioncoding-junction
committed
--update the UpcomingEvent page to use the new Event component
1 parent cfaf64e commit 18d3cc7

File tree

1 file changed

+112
-23
lines changed

1 file changed

+112
-23
lines changed

‎app/UpcomingEvent/Event/page.tsx

Lines changed: 112 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,121 @@
11
"use client";
2-
import React from "react";
2+
import React, { useEffect, useState } from "react";
33
import { BackgroundGradient } from "@/components/ui/background-gradient";
4+
import { sanity } from "@/lib/sanity";
5+
6+
interface EventType {
7+
_id: string;
8+
title: string;
9+
date?: string;
10+
location?: string;
11+
description: string;
12+
tag?: string;
13+
image?: {
14+
asset?: {
15+
url: string;
16+
};
17+
};
18+
registerLink?: string;
19+
}
420

521
const Event = () => {
22+
const [events, setEvents] = useState<EventType[]>([]);
23+
const [loading, setLoading] = useState(true);
24+
25+
useEffect(() => {
26+
sanity
27+
.fetch(
28+
`*[_type == "post"]{
29+
_id,
30+
title,
31+
date,
32+
location,
33+
description,
34+
tag,
35+
image{asset->{url}},
36+
registerLink
37+
}`
38+
)
39+
.then((data) => {
40+
setEvents(data);
41+
setLoading(false);
42+
});
43+
}, []);
44+
645
return (
7-
<section className="w-full px-4 md:px-8 lg:px-16 xl:px-20 py-8 text-center">
8-
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-foreground dark:text-white">
9-
Our Upcoming Events
46+
<section className="w-full px-4 md:px-8 lg:px-16 xl:px-20 py-20 flex flex-col items-center bg-background dark:bg-background relative overflow-hidden">
47+
{/* Animated Decorative Blobs */}
48+
<div className="absolute -top-24 -left-24 w-80 h-80 bg-gradient-to-br from-blue-300 via-blue-200 to-transparent dark:from-blue-900 dark:via-blue-800 rounded-full opacity-30 blur-3xl pointer-events-none z-0 animate-pulse" />
49+
<div className="absolute -bottom-32 -right-32 w-96 h-96 bg-gradient-to-tr from-blue-400 via-blue-200 to-transparent dark:from-blue-700 dark:via-blue-900 rounded-full opacity-20 blur-3xl pointer-events-none z-0 animate-pulse" />
50+
51+
<h2 className="text-5xl md:text-6xl font-extrabold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-700 via-blue-400 to-pink-400 dark:from-blue-200 dark:via-blue-400 dark:to-pink-300 tracking-tight z-10 drop-shadow-xl">
52+
Upcoming Event
1053
</h2>
11-
<div className="flex justify-center">
12-
<BackgroundGradient className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-white dark:bg-zinc-900 shadow-lg">
13-
<img
14-
src="https://th.bing.com/th/id/OIP.LyXE6eshZtpEz8LP7FtcAgHaCt?rs=1&pid=ImgDetMain"
15-
alt="cj"
16-
height={400}
17-
width={400}
18-
className="object-contain rounded-lg"
19-
/>
20-
<p className="text-lg sm:text-xl font-semibold text-black mt-4 mb-2 dark:text-neutral-200">
21-
BB2
22-
</p>
23-
<p className="text-sm text-neutral-600 dark:text-neutral-400">
24-
BB2
25-
</p>
26-
<button className="rounded-full px-5 py-2 text-white flex items-center justify-center space-x-2 bg-black mt-4 text-sm font-bold dark:bg-zinc-800 hover:bg-gray-800 dark:hover:bg-zinc-700 transition duration-300">
27-
<span>Register Now</span>
28-
</button>
29-
</BackgroundGradient>
54+
<p className="text-xl md:text-2xl text-blue-700 dark:text-blue-200 mb-12 max-w-2xl text-center z-10 font-medium">
55+
Don’t miss out on our next big gathering!<br className="hidden md:block" />
56+
<span className="text-pink-500 dark:text-pink-300 font-bold">Unforgettable moments await.</span>
57+
</p>
58+
<div className="flex flex-wrap gap-8 justify-center w-full z-10">
59+
{loading && (
60+
<div className="text-center text-blue-400">Loading events...</div>
61+
)}
62+
{!loading && events.length === 0 && (
63+
<div className="text-center text-blue-400">No events found.</div>
64+
)}
65+
{events.map((event) => (
66+
<BackgroundGradient
67+
key={event._id}
68+
className="rounded-3xl max-w-xl w-full p-0 bg-transparent shadow-none"
69+
>
70+
<div className="bg-white/90 dark:bg-zinc-900/90 rounded-3xl shadow-2xl p-8 sm:p-14 flex flex-col items-center relative overflow-hidden">
71+
{/* Animated Sparkles */}
72+
<div className="absolute top-4 right-8 text-yellow-400 text-3xl animate-bounce">✨</div>
73+
<div className="absolute bottom-4 left-8 text-pink-400 text-2xl animate-pulse">★</div>
74+
<div className="absolute top-8 left-1/2 -translate-x-1/2 text-blue-400 text-2xl animate-spin-slow">✦</div>
75+
{event.image?.asset?.url ? (
76+
<img
77+
src={event.image.asset.url}
78+
alt={event.title}
79+
height={340}
80+
width={340}
81+
className="object-cover rounded-2xl shadow-2xl mb-6 w-full max-w-xs border-4 border-blue-100 dark:border-blue-900 transition-transform duration-300 hover:scale-105"
82+
/>
83+
) : (
84+
<div className="w-full max-w-xs h-[220px] flex items-center justify-center bg-blue-100 dark:bg-blue-900 rounded-2xl mb-6 text-blue-400 dark:text-blue-200 text-lg font-semibold">
85+
No Image Available
86+
</div>
87+
)}
88+
{event.tag && (
89+
<span className="inline-block bg-gradient-to-r from-blue-100 via-blue-300 to-pink-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 text-xs font-semibold px-5 py-2 rounded-full mb-4 shadow-lg tracking-wider uppercase">
90+
{event.tag}
91+
</span>
92+
)}
93+
<h3 className="text-2xl md:text-3xl font-bold text-blue-900 dark:text-white mb-2 tracking-tight text-center">
94+
{event.title}
95+
</h3>
96+
<p className="text-base md:text-lg text-neutral-700 dark:text-neutral-300 mb-8 text-center">
97+
{event.description}
98+
</p>
99+
{event.registerLink ? (
100+
<a
101+
href={event.registerLink}
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
className="rounded-full px-10 py-4 text-white bg-gradient-to-r from-blue-600 via-pink-400 to-blue-600 dark:from-blue-800 dark:via-pink-500 dark:to-blue-600 font-bold shadow-xl hover:scale-105 hover:from-pink-500 hover:to-blue-500 transition-all duration-200 text-lg tracking-wide flex items-center gap-2"
105+
>
106+
<span className="animate-bounce">🚀</span> Register Now
107+
</a>
108+
) : (
109+
<button
110+
disabled
111+
className="rounded-full px-10 py-4 text-white bg-gray-400 dark:bg-gray-700 font-bold shadow-xl text-lg tracking-wide flex items-center gap-2 opacity-60 cursor-not-allowed"
112+
>
113+
Registration Closed
114+
</button>
115+
)}
116+
</div>
117+
</BackgroundGradient>
118+
))}
30119
</div>
31120
</section>
32121
);

0 commit comments

Comments
 (0)