Skip to content

Develop #237

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
Obrempong-1 merged 2 commits into from
Mar 22, 2026
Merged

Develop #237

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d123f2
fix
Obrempong-1 Mar 22, 2026
5ec2f6f
Merge pull request #236 from GESA-KNUST/feature/fixes
Obrempong-1 Mar 22, 2026
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
301 changes: 179 additions & 122 deletions components/home/RecentEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Link from "next/link";
import useEventCollection from "@/hooks/useEventCollection";
import FetchError from "../custom/FetchError";

import { motion } from "framer-motion";
import * as Tabs from "@radix-ui/react-tabs";

const RecentEvent = () => {
const { data: events, isLoading, error } = useEventCollection();
Expand Down Expand Up @@ -38,7 +38,7 @@ const RecentEvent = () => {
}

return (
<section className="px-page-sx md:px-page-x lg:py-24 py-16 font-header bg-background/50 overflow-hidden relative">
<section className="px-page-sx md:px-page-x py-12 lg:py-24 font-header bg-background/50 overflow-hidden relative">
<video
className="absolute top-0 left-0 w-full h-full object-cover z-0"
src="/videos/coenight.mp4"
Expand All @@ -49,139 +49,196 @@ const RecentEvent = () => {
/>
<div className="absolute top-0 left-0 w-full h-full bg-black/60 z-10" />

<div className="max-w-7xl mx-auto grid lg:grid-cols-[1.2fr_auto_1fr] lg:gap-12 gap-8 relative z-20">

{/* Upcoming Events Column */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="flex flex-col gap-8"
>
<h2 className="font-header font-bold text-3xl lg:text-4xl text-white">
Upcoming Events
</h2>

<div className="flex flex-col gap-4">
{upcoming && upcoming.length > 0 ? (
upcoming.map((event) => (
<Link href={`/events#event-${event.slug}`} key={event._id} className="group block w-full">
<div className="flex items-center gap-4 p-4 lg:pr-5 pr-4 bg-white/95 backdrop-blur-sm dark:bg-card hover:bg-white dark:hover:bg-accent/50 rounded-2xl border-2 border-transparent hover:border-primary/30 transition-all duration-300 group-hover:scale-[1.02] shadow-sm">
<div className="flex flex-col items-center justify-center w-16 h-16 rounded-xl bg-primary/10 text-primary border border-primary/20 shrink-0">
<span className="text-xs font-bold uppercase tracking-wider">
{format(new Date(event.eventDate), "MMM")}
</span>
<span className="text-2xl font-bold font-open_sans leading-none">
{format(new Date(event.eventDate), "d")}
</span>
</div>

<div className="flex-1 min-w-0">
<h3 className="font-bold text-gray-900 dark:text-gray-100 line-clamp-2 group-hover:text-primary transition-colors font-header text-lg">
{event.title}
</h3>
<p className="text-sm text-muted-foreground line-clamp-1 mt-1">
<span className="whitespace-pre-wrap">{event.description}</span>
</p>
</div>

<div className="text-muted-foreground group-hover:text-primary transition-transform duration-300 group-hover:translate-x-1">
<ArrowRight className="w-5 h-5" />
</div>
</div>
</Link>
))
) : (
<div className="p-8 text-center text-white/70 bg-white/5 backdrop-blur-sm rounded-2xl border border-dashed border-white/20">
No upcoming events. Stay tuned!
<div className="max-w-7xl mx-auto relative z-20">
{/* Mobile Tabs View */}
<div className="lg:hidden">
<Tabs.Root defaultValue="upcoming" className="flex flex-col gap-8">
<Tabs.List className="flex bg-white/10 backdrop-blur-md p-1.5 rounded-2xl border border-white/20">
<Tabs.Trigger
value="upcoming"
className="flex-1 py-3 px-4 rounded-xl text-sm font-bold transition-all data-[state=active]:bg-primary data-[state=active]:text-black text-white/70 hover:text-white"
>
Upcoming
</Tabs.Trigger>
<Tabs.Trigger
value="recent"
className="flex-1 py-3 px-4 rounded-xl text-sm font-bold transition-all data-[state=active]:bg-primary data-[state=active]:text-black text-white/70 hover:text-white"
>
Recent
</Tabs.Trigger>
</Tabs.List>

<Tabs.Content value="upcoming" className="outline-none">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
{upcoming && upcoming.length > 0 ? (
upcoming.map((event) => (
<EventCard key={event._id} event={event} type="upcoming" />
))
) : (
<EmptyEvents message="No upcoming events. Stay tuned!" />
)}
</div>
<JoinCommunityCard />
</div>
)}
</Tabs.Content>

<Tabs.Content value="recent" className="outline-none">
<div className="flex flex-col gap-4">
{recent && recent.length > 0 ? (
recent.map((event) => (
<EventCard key={event._id} event={event} type="recent" />
))
) : (
<EmptyEvents message="No recent events found." />
)}
</div>
</Tabs.Content>
</Tabs.Root>
</div>

{/* Desktop View */}
<div className="hidden lg:grid lg:grid-cols-[1.2fr_auto_1fr] gap-12">
{/* Upcoming Events Column */}
<div className="flex flex-col gap-8">
<h3 className="font-header font-bold text-4xl text-white">
Upcoming Events
</h3>

<div className="flex flex-col gap-4">
{upcoming && upcoming.length > 0 ? (
upcoming.map((event) => (
<EventCard key={event._id} event={event} type="upcoming" />
))
) : (
<EmptyEvents message="No upcoming events. Stay tuned!" />
)}
</div>

<JoinCommunityCard />
</div>

{/* Separator */}
<div className="flex justify-center h-full">
<div className="w-px h-full bg-linear-to-b from-transparent via-white/20 to-transparent"></div>
</div>

<div className="mt-4 p-6 lg:p-8 bg-linear-to-br from-gray-900 to-black rounded-3xl text-white relative overflow-hidden group border border-white/10 shadow-2xl">
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl -mr-16 -mt-16 transition-all duration-500 group-hover:bg-primary/30"></div>
<div className="relative z-10">
<h3 className="font-bold text-xl mb-2 font-header">Join the Community</h3>
<p className="text-gray-400 text-sm mb-6 leading-relaxed">Don't miss out on future events and opportunities from the biggest engineering body on campus.</p>
<Link href="/events" className="inline-flex items-center text-sm font-bold text-primary hover:text-white transition-colors gap-2 group-link">
View All Events <ArrowRight className="w-4 h-4 group-link-hover:translate-x-1 transition-transform" />
</Link>
{/* Recent Events Column */}
<div className="flex flex-col gap-8">
<div className="flex items-center justify-between">
<h3 className="font-header font-bold text-4xl text-white flex items-center gap-3">
Recent Events
<div className="h-2 w-2 rounded-full bg-red-500 animate-pulse font-header" />
</h3>
</div>

<div className="flex flex-col gap-6">
{recent && recent.length > 0 ? (
recent.map((event) => (
<EventCard key={event._id} event={event} type="recent" />
))
) : (
<EmptyEvents message="No recent events found." />
)}
</div>
</div>
</motion.div>
</div>
</div>

</section>
);
};

{/* Separator */}
<div className="hidden lg:flex justify-center h-full">
<div className="w-px h-full bg-linear-to-b from-transparent via-white/20 to-transparent"></div>
const EventCard = ({ event, type }: { event: any; type: 'upcoming' | 'recent' }) => {
if (type === 'upcoming') {
return (
<Link href={`/events#event-${event.slug}`} className="group block w-full">
<div className="flex items-center gap-4 p-4 lg:pr-5 pr-4 bg-white/95 backdrop-blur-sm dark:bg-card hover:bg-white dark:hover:bg-accent/50 rounded-2xl border-2 border-transparent hover:border-primary/30 transition-all duration-300 group-hover:scale-[1.02] shadow-sm">
<div className="flex flex-col items-center justify-center w-14 h-14 lg:w-16 lg:h-16 rounded-xl bg-primary/10 text-primary border border-primary/20 shrink-0">
<span className="text-[10px] lg:text-xs font-bold uppercase tracking-wider">
{format(new Date(event.eventDate), "MMM")}
</span>
<span className="text-xl lg:text-2xl font-bold font-open_sans leading-none">
{format(new Date(event.eventDate), "d")}
</span>
</div>

<div className="flex-1 min-w-0">
<h3 className="font-bold text-gray-900 dark:text-gray-100 line-clamp-2 group-hover:text-primary transition-colors font-header text-lg">
{event.title}
</h3>
<p className="text-xs text-muted-foreground line-clamp-2 mt-1">
<span className="whitespace-pre-wrap">{event.description}</span>
</p>
</div>

<div className="text-muted-foreground group-hover:text-primary transition-transform duration-300 group-hover:translate-x-1">
<ArrowRight className="w-5 h-5" />
</div>
</div>
</Link>
);
}

return (
<Link href={`/events#event-${event.slug}`} className="group block w-full">
<div className="bg-white/95 backdrop-blur-sm dark:bg-card border-2 border-transparent hover:border-primary/30 shadow-sm hover:shadow-2xl transition-all duration-300 rounded-3xl overflow-hidden flex flex-row h-auto sm:h-[180px] p-3 sm:p-0 gap-4 group-hover:-translate-y-1">
<div className="relative w-20 h-20 sm:w-[220px] sm:h-full shrink-0 overflow-hidden rounded-xl sm:rounded-none">
<Image
src={event.eventImage.url}
alt="Event Image"
className="object-cover transition-transform duration-700 group-hover:scale-110"
fill
/>
<div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
</div>

{/* Recent Events Column */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="flex flex-col gap-8"
>
<div className="flex items-center justify-between">
<h2 className="font-header font-bold text-3xl lg:text-4xl text-white flex items-center gap-3">
Recent Events
<div className="h-2 w-2 rounded-full bg-red-500 animate-pulse font-header" />
</h2>
<div className="flex flex-col justify-center sm:justify-between py-1 sm:py-5 pr-2 sm:pr-7 flex-1 min-w-0 gap-1 sm:gap-0">
<div>
<div className="flex items-center gap-2 text-primary font-bold text-[10px] uppercase tracking-widest mb-2">
<Clock className="w-3 h-3" />
completed
</div>
<h3 className="font-header font-bold text-base sm:text-xl text-gray-900 truncate sm:line-clamp-2 group-hover:text-primary transition-colors mb-0.5 sm:mb-2 leading-tight">
{event.title}
</h3>
<p className="text-gray-500 text-[10px] sm:text-sm line-clamp-1 sm:line-clamp-2 leading-relaxed">
{event.description}
</p>
</div>

<div className="flex flex-col gap-6">
{recent && recent.length > 0 ? (
recent.map((event) => (
<Link href={`/events#event-${event.slug}`} key={event._id} className="group block">
<div className="bg-white/95 backdrop-blur-sm dark:bg-card border-2 border-transparent hover:border-primary/30 shadow-sm hover:shadow-2xl transition-all duration-300 rounded-3xl overflow-hidden flex flex-col sm:flex-row h-auto sm:h-[180px] p-2 sm:p-0 gap-4 group-hover:-translate-y-1">
<div className="relative w-full sm:w-[220px] h-[160px] sm:h-full overflow-hidden rounded-2xl sm:rounded-none">
<Image
src={event.eventImage.url}
alt="Event Image"
className="object-cover transition-transform duration-700 group-hover:scale-110"
fill
/>
<div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
</div>

<div className="flex flex-col justify-between p-4 sm:py-5 sm:pr-7 flex-1 gap-2 sm:gap-0">
<div>
<div className="flex items-center gap-2 text-primary font-bold text-[10px] uppercase tracking-widest mb-2">
<Clock className="w-3 h-3" />
completed
</div>
<h3 className="font-header font-bold text-lg sm:text-xl text-gray-900 line-clamp-2 group-hover:text-primary transition-colors mb-2 leading-tight">
{event.title}
</h3>
<p className="text-gray-500 text-sm line-clamp-2 leading-relaxed">
{event.description}
</p>
</div>

<div className="flex items-center justify-between mt-auto pt-2">
<span className="text-xs font-bold text-gray-400 flex items-center gap-2 uppercase tracking-wide">
<CalendarDays className="w-4 h-4" />
{format(new Date(event.eventDate), "MMM do, yyyy")}
</span>
<div className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300 transform group-hover:translate-x-1 shadow-sm">
<ArrowRight className="w-4 h-4" />
</div>
</div>
</div>
</div>
</Link>
))
) : (
<div className="p-8 text-center text-white/70 bg-white/5 backdrop-blur-sm rounded-2xl border border-dashed border-white/20">
No recent events found.
</div>
)}
<div className="flex items-center justify-between mt-auto pt-2">
<span className="text-[10px] sm:text-xs font-bold text-gray-400 flex items-center gap-1.5 sm:gap-2 uppercase tracking-wide">
<CalendarDays className="w-3 h-3 sm:w-4 h-4" />
{format(new Date(event.eventDate), "MMM do, yyyy")}
</span>
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300 transform group-hover:translate-x-1 shadow-sm">
<ArrowRight className="w-4 h-4" />
</div>
</div>
</motion.div>
</div>
</div>

</section>
</Link>
);
};

const JoinCommunityCard = () => (
<div className="mt-4 p-5 lg:p-8 bg-linear-to-br from-gray-900 to-black rounded-3xl text-white relative overflow-hidden group border border-white/10 shadow-2xl">
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl -mr-16 -mt-16 transition-all duration-500 group-hover:bg-primary/30"></div>
<div className="relative z-10">
<h3 className="font-bold text-xl lg:text-2xl mb-2 font-header">Join the Community</h3>
<p className="text-gray-400 text-sm mb-6 leading-relaxed">Don't miss out on future events and opportunities from the biggest engineering body on campus.</p>
<Link href="/events" className="inline-flex items-center text-sm font-bold text-primary hover:text-white transition-colors gap-2 group-link">
View All Events <ArrowRight className="w-4 h-4 group-link-hover:translate-x-1 transition-transform" />
</Link>
</div>
</div>
);

const EmptyEvents = ({ message }: { message: string }) => (
<div className="p-8 text-center text-white/70 bg-white/5 backdrop-blur-sm rounded-2xl border border-dashed border-white/20">
{message}
</div>
);

export default RecentEvent;
Loading