Skip to content

Deployment of UI Enhancement of Community Holidays Page with Optimized Layout and Interactive Components #850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HarshS16 merged 1 commit into from
Aug 25, 2025
Merged

Deployment of UI Enhancement of Community Holidays Page with Optimized Layout and Interactive Components #850

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 47 additions & 58 deletions src/Pages/CommunityHolidays.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,9 @@ export default function Holidays() {
];

useEffect(() => {
// Simulate API call since we can't use environment variables
setLoading(true);
setError("");

// Mock data for demonstration
// Mock data only
const mockHolidays = [
{
name: "New Year's Day",
Expand Down Expand Up @@ -56,7 +54,6 @@ export default function Holidays() {
description: "Christian holiday celebrating the birth of Jesus Christ"
}
];

setTimeout(() => {
setHolidays(mockHolidays);
setLoading(false);
Expand All @@ -69,7 +66,7 @@ export default function Holidays() {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
day: 'numeric'
});
};

Expand All @@ -84,38 +81,39 @@ export default function Holidays() {
};

return (
<div className="min-h-screen bg-gradient-to-br from-green-50/30 via-white to-emerald-50/40 p-6">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen bg-gradient-to-br from-green-50/40 via-white to-emerald-50/60 dark:from-emerald-950 dark:via-gray-900 dark:to-green-950 p-6">
<div className="max-w-7xl mx-auto space-y-10">
{/* Header */}
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
<div className="flex items-center gap-4">
<div className="bg-gradient-to-br from-green-500 to-emerald-600 p-4 rounded-3xl shadow-lg">
<Calendar className="w-8 h-8 text-white" />
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-7">
<div className="flex items-center gap-5">
<div className="bg-gradient-to-br from-emerald-500 to-green-600 p-5 rounded-[2rem] shadow-lg">
<Calendar className="w-9 h-9 text-white" />
</div>
<div>
<h1 className="text-4xl font-bold bg-gradient-to-r from-green-700 to-emerald-700 bg-clip-text text-transparent">
<h1 className="text-4xl sm:text-5xl font-extrabold bg-gradient-to-r from-emerald-700 via-green-700 to-emerald-500 bg-clip-text text-transparent mb-1 tracking-tighter">
Holidays {year}
</h1>
<p className="text-gray-600 mt-1">Discover celebrations around the world</p>
<p className="text-green-800/80 dark:text-emerald-200/80 font-medium">
Discover celebrations around the world
</p>
</div>
</div>

{/* Country Selector */}
<div className="relative group">
<div className="flex items-center gap-3 bg-white/80 backdrop-blur-sm border-2 border-green-200/50 rounded-2xl px-4 py-3 shadow-lg hover:shadow-xl transition-all duration-300 hover:border-green-300">
<Globe className="w-5 h-5 text-green-600" />
<div className="flex items-center gap-3 bg-white/90 dark:bg-emerald-950/70 backdrop-blur border-2 border-emerald-100/60 dark:border-emerald-800/60 rounded-2xl px-5 py-3 shadow-lg hover:shadow-emerald-100/30 transition hover:border-emerald-400">
<Globe className="w-5 h-5 text-emerald-500" />
<select
value={country}
onChange={(e) => setCountry(e.target.value)}
className="bg-transparent outline-none text-gray-700 font-semibold cursor-pointer"
className="bg-transparent outline-none text-emerald-800 dark:text-emerald-100 font-bold cursor-pointer"
>
{countries.map(c => (
<option key={c.code} value={c.code}>
{c.flag} {c.name}
</option>
))}
</select>
<MapPin className="w-4 h-4 text-green-500" />
<MapPin className="w-4 h-4 text-emerald-400" />
</div>
</div>
</div>
Expand All @@ -124,10 +122,10 @@ export default function Holidays() {
{loading && (
<div className="flex flex-col items-center justify-center py-20">
<div className="relative">
<Loader2 className="w-12 h-12 animate-spin text-green-500" />
<div className="absolute inset-0 w-12 h-12 border-4 border-green-200 rounded-full animate-pulse"></div>
<Loader2 className="w-14 h-14 animate-spin text-emerald-500" />
<div className="absolute inset-0 w-14 h-14 border-4 border-emerald-200 rounded-full animate-pulse"></div>
</div>
<p className="mt-4 text-gray-600 font-medium">Discovering holidays...</p>
<p className="mt-4 text-green-900/80 dark:text-emerald-200 font-medium text-xl">Discovering holidays...</p>
</div>
)}

Expand All @@ -136,79 +134,70 @@ export default function Holidays() {
<div className="p-6 rounded-2xl border-2 border-red-200 bg-gradient-to-r from-red-50 to-pink-50 backdrop-blur-sm">
<div className="flex items-center gap-3">
<AlertCircle className="w-6 h-6 text-red-600" />
<p className="text-red-700 font-medium">{error}</p>
<p className="text-red-700 font-semibold">{error}</p>
</div>
</div>
)}

{/* Holidays Grid */}
{!loading && !error && (
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
{holidays.length === 0 ? (
<div className="col-span-full flex flex-col items-center justify-center py-20">
<div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
<Calendar className="w-12 h-12 text-gray-400" />
<div className="w-24 h-24 bg-emerald-50 dark:bg-emerald-900/30 rounded-full flex items-center justify-center mb-5">
<Calendar className="w-12 h-12 text-emerald-400" />
</div>
<p className="text-gray-500 text-lg font-medium">No holidays found for {year}</p>
<p className="text-gray-400 text-sm mt-1">Try selecting a different country</p>
<p className="text-emerald-700 dark:text-emerald-200 text-lg font-medium">No holidays found for {year}</p>
<p className="text-emerald-500/70 dark:text-emerald-300 mt-2">Try selecting a different country</p>
</div>
) : (
holidays.map((holiday, idx) => {
const isToday = holiday.date.iso === today;
const isPast = new Date(holiday.date.iso) < new Date(today);

return (
<div
key={idx}
className={`group relative overflow-hidden rounded-3xl border-2 p-6 shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-105 bg-gradient-to-br backdrop-blur-sm ${
isToday
? "from-green-100 to-emerald-100 border-green-400 shadow-green-200"
className={`group relative overflow-hidden rounded-3xl border-2 p-7 shadow-xl bg-gradient-to-br duration-300 transition-all hover:shadow-emerald-100/40 hover:scale-[1.025] hover:border-emerald-400
${isToday
? "from-green-100 to-emerald-100 border-emerald-400 shadow-emerald-200"
: isPast
? "from-gray-50 to-gray-100 border-gray-200"
: "from-white to-green-50/30 border-green-200/50 hover:border-green-300"
}`}
? "from-gray-100 to-gray-50 border-gray-200 shadow"
: "from-white to-green-50/40 border-emerald-200/60"}
`}
>
{/* Date Badge */}
<div className={`absolute top-4 right-4 w-16 h-16 rounded-2xl flex flex-col items-center justify-center text-white font-bold shadow-lg ${
isToday ? "bg-gradient-to-br from-green-500 to-green-600" : "bg-gradient-to-br from-emerald-400 to-green-500"
}`}>
{/* Date badge */}
<div className={`absolute top-6 right-6 w-16 h-16 rounded-2xl flex flex-col items-center justify-center text-white font-extrabold tracking-tight shadow-lg
${isToday
? "bg-gradient-to-br from-emerald-500 to-green-600"
: "bg-gradient-to-br from-emerald-300 to-green-400"}
`}>
<span className="text-xs">{getMonthFromDate(holiday.date.iso)}</span>
<span className="text-lg">{getDayFromDate(holiday.date.iso)}</span>
<span className="text-2xl">{getDayFromDate(holiday.date.iso)}</span>
</div>

{/* Today Badge */}
{/* TODAY badge */}
{isToday && (
<div className="absolute top-4 left-4 flex items-center gap-1 px-3 py-1 bg-green-600 text-white text-xs font-bold rounded-full animate-pulse">
<div className="absolute top-6 left-6 flex items-center gap-2 px-3 py-1 bg-emerald-600 text-white text-xs font-bold rounded-full animate-pulse shadow shadow-emerald-400">
<Sparkles className="w-3 h-3" />
Today!
</div>
)}

{/* Holiday Info */}
<div className="space-y-3 mt-4">
<h3 className={`text-xl font-bold leading-tight ${
isPast ? "text-gray-600" : "text-gray-800"
}`}>
<div className="mt-5 space-y-3">
<h3 className={`text-xl font-extrabold leading-tight ${isPast ? "text-gray-500" : "text-emerald-900 dark:text-emerald-100"}`}>
{holiday.name}
</h3>

<p className={`text-sm font-medium ${
isPast ? "text-gray-500" : "text-green-700"
}`}>
<p className={`text-sm font-semibold ${isPast ? "text-gray-500" : "text-emerald-700 dark:text-emerald-300"}`}>
{formatDate(holiday.date.iso)}
</p>

{holiday.description && (
<p className={`text-sm leading-relaxed ${
isPast ? "text-gray-500" : "text-gray-600"
}`}>
{holiday.description}
</p>
<p className={`text-base ${isPast ? "text-gray-400" : "text-emerald-800 dark:text-emerald-200"}`}>{holiday.description}</p>
)}
</div>

{/* Decorative Elements */}
<div className="absolute -bottom-4 -right-4 w-24 h-24 bg-gradient-to-br from-green-200/20 to-emerald-200/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-500"></div>
{/* Decorative orb */}
<div className="absolute -bottom-4 -right-4 w-28 h-24 bg-gradient-to-br from-green-200/10 to-emerald-200/10 rounded-full blur-xl group-hover:scale-125 transition-transform duration-400"></div>
</div>
);
})
Expand All @@ -218,4 +207,4 @@ export default function Holidays() {
</div>
</div>
);
}
}