+ {/* Status Badge */}
+
+
+
+ {getStatusText()}
+
- {/* Title & tagline */}
-
-
+ {/* Title & Tagline */}
+
+
{title}
-
{tagline && (
-
+
{tagline}
-
- )}
-
- {tagline && (
-
+
)}
- {renderDateSection()}
-
- {categories && categories.length > 0 && (
-
-
- Categories:
+ {/* Categories */}
+ {categories && categories.length > 0 && (
+
+ {categories.map((cat, i) => (
+
+ {cat}
-
+ ))}
+
+ )}
+
+ {/* Stats Row */}
+
+ {/* Countdown Timer */}
+ {timeRemaining.total > 0 && (
+
+
+
+
+ {status === 'ongoing' ? 'Ends In' : 'Starts In'}
+
+
+
+ {formatCountdown(timeRemaining)}
+
)}
- {/* Action Buttons */}
-
- {/* Registration Button */}
- {renderRegistrationButton()}
+ {/* Participants Count */}
+ {participants !== undefined && (
+
+
+
+
+ Participants
+
+
+
+ {participants.toLocaleString()}
+
+
+ )}
- {/* Submit */}
- {hackathonStatus.current === 'ongoing' &&
- isRegistered &&
- !hasSubmitted &&
- onSubmitClick && (
-
- )}
+ {/* Prize Pool */}
+ {totalPrizePool && (
+
+
+
+
+ Total Prize Pool
+
+
+
+ ${totalPrizePool}
+
+
+ )}
+
- {/* View Submission */}
- {hackathonStatus.current === 'ongoing' &&
- isRegistered &&
- hasSubmitted &&
- onViewSubmissionClick && (
-
- )}
+ {/* Action Buttons - Mobile Only */}
+
+ {renderRegistrationButton()}
+
+ {status === 'ongoing' &&
+ isRegistered &&
+ !hasSubmitted &&
+ onSubmitClick && (
+
+ )}
- {/* Find Team */}
- {hackathonStatus.current === 'ongoing' &&
- isRegistered &&
- isTeamFormationEnabled &&
- onFindTeamClick && (
-
- )}
-
+ {status === 'ongoing' &&
+ isRegistered &&
+ hasSubmitted &&
+ onViewSubmissionClick && (
+
+ )}
+
+ {status === 'ongoing' &&
+ isRegistered &&
+ isTeamFormationEnabled &&
+ onFindTeamClick && (
+
+ )}
);
}
diff --git a/components/hackathons/hackathonStickyCard.tsx b/components/hackathons/hackathonStickyCard.tsx
new file mode 100644
index 000000000..964962d44
--- /dev/null
+++ b/components/hackathons/hackathonStickyCard.tsx
@@ -0,0 +1,295 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import Image from 'next/image';
+import { useAuthStatus } from '@/hooks/use-auth';
+import { useRouter, usePathname } from 'next/navigation';
+import { useMemo } from 'react';
+import {
+ Calendar,
+ ArrowRight,
+ FileText,
+ Users,
+ Trophy,
+ Plus,
+} from 'lucide-react';
+import { useHackathonStatus } from '@/hooks/hackathon/use-hackathon-status';
+import { formatDate } from '@/lib/utils';
+
+interface HackathonStickyCardProps {
+ title: string;
+ imageUrl?: string;
+ deadline?: string;
+ startDate?: string;
+ totalPrizePool?: string;
+ isRegistered?: boolean;
+ hasSubmitted?: boolean;
+ isTeamFormationEnabled?: boolean;
+ registrationDeadlinePolicy?:
+ | 'before_start'
+ | 'before_submission_deadline'
+ | 'custom';
+ registrationDeadline?: string;
+ isLeaving?: boolean;
+ onJoinClick?: () => void;
+ onSubmitClick?: () => void;
+ onViewSubmissionClick?: () => void;
+ onFindTeamClick?: () => void;
+ onLeaveClick?: () => void;
+}
+
+export function HackathonStickyCard(props: HackathonStickyCardProps) {
+ const {
+ title,
+ imageUrl,
+ deadline,
+ startDate,
+ totalPrizePool,
+ isRegistered = false,
+ hasSubmitted = false,
+ isTeamFormationEnabled = false,
+ registrationDeadlinePolicy,
+ registrationDeadline,
+ onJoinClick,
+ onSubmitClick,
+ onViewSubmissionClick,
+ onFindTeamClick,
+ onLeaveClick,
+ isLeaving,
+ } = props;
+
+ const { status } = useHackathonStatus(startDate, deadline);
+ const { isAuthenticated } = useAuthStatus();
+ const router = useRouter();
+ const pathname = usePathname();
+
+ // Determine if registration is allowed
+ const canRegister = useMemo(() => {
+ const now = new Date();
+ const policy = registrationDeadlinePolicy || 'before_submission_deadline';
+
+ switch (policy) {
+ case 'before_start':
+ return startDate ? now < new Date(startDate) : false;
+ case 'before_submission_deadline':
+ return deadline ? now < new Date(deadline) : false;
+ case 'custom':
+ return registrationDeadline
+ ? now < new Date(registrationDeadline)
+ : false;
+ default:
+ return false;
+ }
+ }, [registrationDeadlinePolicy, startDate, deadline, registrationDeadline]);
+
+ // Get appropriate register button text
+ const getRegisterButtonText = useMemo(() => {
+ if (!canRegister) return null;
+ const now = new Date();
+ const beforeStart = startDate && now < new Date(startDate);
+
+ switch (registrationDeadlinePolicy || 'before_submission_deadline') {
+ case 'before_start':
+ return 'Register';
+ case 'before_submission_deadline':
+ return beforeStart ? 'Register' : 'Join';
+ case 'custom':
+ if (registrationDeadline) {
+ const custom = new Date(registrationDeadline);
+ const beforeCustom = now < custom;
+ if (beforeStart && beforeCustom) return 'Register';
+ if (!beforeStart && beforeCustom) return 'Register';
+ }
+ return 'Register';
+ default:
+ return 'Join';
+ }
+ }, [
+ registrationDeadlinePolicy,
+ canRegister,
+ startDate,
+ registrationDeadline,
+ ]);
+
+ // Redirect to auth if user not authenticated
+ const redirectToAuth = () => {
+ const callbackUrl = encodeURIComponent(pathname);
+ router.push(`/auth?mode=signin&callbackUrl=${callbackUrl}`);
+ };
+
+ // Format date with fallback
+ const formatDateWithFallback = (dateString?: string) => {
+ if (!dateString) return 'N/A';
+ try {
+ return formatDate(new Date(dateString));
+ } catch {
+ return new Date(dateString).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ });
+ }
+ };
+
+ return (
+
+
+ {/* Image Section - UNCHANGED */}
+ {imageUrl && (
+
+
+
+ )}
+
+ {/* Wave Background */}
+
+
+
+
+
+ {/* Prize Pool Section */}
+ {totalPrizePool && (
+
+
+
+ Prize Pool
+
+
+ ${totalPrizePool}
+
+
+ )}
+
+ {/* Countdown Timer */}
+ {/* {timeRemaining.total > 0 && (
+
+
+ {status === "ongoing" ? "Ends In" : "Starts In"}
+
+
+ {formatCountdown(timeRemaining)}
+
+
+ )} */}
+
+ {/* Date Info Section */}
+
+ {status === 'ongoing' && deadline && (
+
+ Deadline
+
+ {formatDateWithFallback(deadline)}
+
+
+ )}
+
+ {status === 'upcoming' && startDate && (
+
+ Starts
+
+ {formatDateWithFallback(startDate)}
+
+
+ )}
+
+ {status === 'ended' && deadline && (
+
+ Ended
+
+ {formatDateWithFallback(deadline)}
+
+
+ )}
+
+
+ {/* Action Buttons */}
+
+ {/* Register / Leave Button */}
+ {!isRegistered ? (
+ canRegister ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+ {/* Submit Project Button */}
+ {status === 'ongoing' && isRegistered && !hasSubmitted && (
+
+ )}
+
+ {/* View Submission Button */}
+ {status === 'ongoing' &&
+ isRegistered &&
+ hasSubmitted &&
+ onViewSubmissionClick && (
+
+ )}
+
+ {/* Find Team Button */}
+ {status === 'ongoing' &&
+ isRegistered &&
+ isTeamFormationEnabled &&
+ onFindTeamClick && (
+
+ )}
+
+
+
+ );
+}
diff --git a/components/hackathons/overview/hackathonOverview.tsx b/components/hackathons/overview/hackathonOverview.tsx
index df8bb3220..c804f0c5a 100644
--- a/components/hackathons/overview/hackathonOverview.tsx
+++ b/components/hackathons/overview/hackathonOverview.tsx
@@ -108,7 +108,7 @@ export function HackathonOverview({
};
return (
-
+
{loading && Loading content...
}
{error && (
diff --git a/components/landing-page/Explore.tsx b/components/landing-page/Explore.tsx
index 291f4c0cb..7aa933339 100644
--- a/components/landing-page/Explore.tsx
+++ b/components/landing-page/Explore.tsx
@@ -253,7 +253,7 @@ export default function Explore() {
Active Opportunities
- Explore What’s Happening
+ Explore What's Happening
{tabs.map(tab => (
@@ -281,7 +281,7 @@ export default function Explore() {
-
+
{activeTab === 'featured-projects' && (
<>
{projectsLoading ? (
diff --git a/hooks/hackathon/use-hackathon-status.ts b/hooks/hackathon/use-hackathon-status.ts
new file mode 100644
index 000000000..aee9e136f
--- /dev/null
+++ b/hooks/hackathon/use-hackathon-status.ts
@@ -0,0 +1,81 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useHackathonStatus(startDate?: string, deadline?: string) {
+ const [status, setStatus] = useState<'upcoming' | 'ongoing' | 'ended'>(
+ 'upcoming'
+ );
+ const [timeRemaining, setTimeRemaining] = useState({
+ days: 0,
+ hours: 0,
+ minutes: 0,
+ seconds: 0,
+ total: 0,
+ });
+
+ useEffect(() => {
+ const now = Date.now();
+ const start = startDate ? new Date(startDate).getTime() : null;
+ const end = deadline ? new Date(deadline).getTime() : null;
+
+ let newStatus: 'upcoming' | 'ongoing' | 'ended' = 'upcoming';
+
+ if (end && now > end) {
+ newStatus = 'ended';
+ } else if (start && now >= start) {
+ newStatus = 'ongoing';
+ } else {
+ newStatus = 'upcoming';
+ }
+
+ setStatus(newStatus);
+ }, [startDate, deadline]);
+
+ useEffect(() => {
+ const target =
+ status === 'ongoing'
+ ? deadline
+ : status === 'upcoming'
+ ? startDate
+ : null;
+
+ if (!target) return;
+
+ const getTime = () => {
+ const now = Date.now();
+ const targetTime = new Date(target).getTime();
+ const diff = targetTime - now;
+
+ if (diff <= 0) {
+ return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+ }
+
+ return {
+ days: Math.floor(diff / 86400000),
+ hours: Math.floor((diff % 86400000) / 3600000),
+ minutes: Math.floor((diff % 3600000) / 60000),
+ seconds: Math.floor((diff % 60000) / 1000),
+ total: diff,
+ };
+ };
+
+ setTimeRemaining(getTime());
+
+ const interval = setInterval(() => setTimeRemaining(getTime()), 1000);
+ return () => clearInterval(interval);
+ }, [deadline, startDate, status]);
+
+ const formatCountdown = (t: typeof timeRemaining) => {
+ if (t.total <= 0) return 'Ended';
+ if (t.days > 0) return `${t.days}d ${t.hours}h`;
+ if (t.hours > 0) return `${t.hours}h ${t.minutes}m`;
+ return `${t.minutes}m ${t.seconds}s`;
+ };
+
+ return {
+ status,
+ timeRemaining,
+ formatCountdown,
+ };
+}