Hackathon details

app/(landing)/hackathons/[slug]/page.tsx

@@ -15,6 +15,7 @@
 import { HackathonDiscussions } from '@/components/hackathons/discussion/comment';
 import { TeamFormationTab } from '@/components/hackathons/team-formation/TeamFormationTab';
 import LoadingScreen from '@/components/landing-page/project/CreateProjectModal/LoadingScreen';
+import { useTimelineEvents } from '@/hooks/hackathon/use-timeline-events';
 
 export default function HackathonPage() {
   const router = useRouter();
@@ -23,14 +24,16 @@
 
   const {
     currentHackathon,
-    // content,
-    timelineEvents,
     participants,
     submissions,
-    prizes,
     loading,
     setCurrentHackathon,
   } = useHackathonData();
+  console.log(currentHackathon);
+  const timeline_Events = useTimelineEvents(currentHackathon, {
+    includeEndDate: false,
+    dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
+  });
 
   const hackathonTabs = useMemo(() => {
     const tabs = [
@@ -193,8 +196,9 @@
         {activeTab === 'overview' && (
           <HackathonOverview
             content={currentHackathon.description}
-            timelineEvents={timelineEvents}
-            prizes={prizes}
+            timelineEvents={timeline_Events}
+            prizes={currentHackathon.prizeTiers}
+            totalPrizePool={currentHackathon.totalPrizePool}
             hackathonSlugOrId={hackathonId}
           />
         )}

app/(landing)/hackathons/preview/[orgId]/[draftId]/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
 import {
   previewDraft,
+  PrizeTier,
   transformPublicHackathonToHackathon,
 } from '@/lib/api/hackathons';
 import { HackathonBanner } from '@/components/hackathons/hackathonBanner';
@@ -28,30 +29,29 @@ const mockTimelineEvents = [
   { event: 'Winners Announced', date: new Date().toISOString() },
 ];
 
-const mockPrizes = [
+const mockPrizes: PrizeTier[] = [
   {
-    title: 'First Place',
-    rank: '1st',
-    prize: '$5,000',
-    icon: '🥇',
-    details: ['Cash prize', 'Certificate', 'Featured on homepage'],
+    position: '1st',
+    amount: 5000,
+    currency: 'USD',
+    description: 'Cash prize, Certificate, Featured on homepage',
   },
   {
-    title: 'Second Place',
-    rank: '2nd',
-    prize: '$3,000',
-    icon: '🥈',
-    details: ['Cash prize', 'Certificate'],
+    position: '2nd',
+    amount: 3000,
+    currency: 'USD',
+    description: 'Cash prize, Certificate',
   },
   {
-    title: 'Third Place',
-    rank: '3rd',
-    prize: '$2,000',
-    icon: '🥉',
-    details: ['Cash prize', 'Certificate'],
+    position: '3rd',
+    amount: 2000,
+    currency: 'USD',
+    description: 'Cash prize, Certificate',
   },
 ];
 
+const totalPrizePool = mockPrizes.reduce((sum, prize) => sum + prize.amount, 0);
+
 interface PreviewPageProps {
   params: Promise<{
     orgId: string;
@@ -400,6 +400,7 @@ export default function DraftPreviewPage({ params }: PreviewPageProps) {
       <div className='mx-auto max-w-7xl px-6 py-12 text-white'>
         {activeTab === 'overview' && (
           <HackathonOverview
+            totalPrizePool={totalPrizePool.toString()}
             content={mockContent}
             timelineEvents={mockTimelineEvents}
             prizes={mockPrizes}

components/hackathons/overview/hackathonOverview.tsx

@@ -2,24 +2,17 @@
 import { useMarkdown } from '@/hooks/use-markdown';
 import { HackathonTimeline } from './hackathonTimeline';
 import { HackathonPrizes } from './hackathonPrizes';
+import { PrizeTier } from '@/lib/api/hackathons';
 
-interface TimelineEvent {
+interface Timeline {
   event: string;
   date: string;
 }
-
-interface Prize {
-  title: string;
-  rank: string;
-  prize: string;
-  details: string[];
-  icon?: string;
-}
-
 interface HackathonOverviewProps {
   content: string;
-  timelineEvents?: TimelineEvent[];
-  prizes?: Prize[];
+  timelineEvents?: Timeline[];
+  prizes?: PrizeTier[];
+  totalPrizePool: string;
   className?: string;
   hackathonSlugOrId?: string;
   organizationId?: string;
@@ -30,6 +23,7 @@ export function HackathonOverview({
   timelineEvents,
   prizes,
   className = '',
+  totalPrizePool,
 }: HackathonOverviewProps) {
   // Use the markdown hook to parse and style the content
   const { styledContent, loading, error } = useMarkdown(content, {
@@ -50,7 +44,9 @@ export function HackathonOverview({
       </article>
 
       {timelineEvents && <HackathonTimeline events={timelineEvents} />}
-      {prizes && <HackathonPrizes prizes={prizes} />}
+      {prizes && (
+        <HackathonPrizes totalPrizePool={totalPrizePool} prizes={prizes} />
+      )}
     </div>
   );
 }

components/hackathons/overview/hackathonPrizes.tsx

@@ -1,66 +1,110 @@
 'use client';
 
+import { PrizeTier } from '@/lib/api/hackathons';
+
 interface HackathonPrizesProps {
   title?: string;
-  totalPrizes?: string;
+  totalPrizePool?: string;
   otherPrizes?: string;
-  prizes: Array<{
-    title: string;
-    rank: string;
-    prize: string;
-    details: string[];
-    icon?: string;
-  }>;
+  prizes: PrizeTier[];
 }
 
 export function HackathonPrizes({
   title = 'PRIZES',
-  totalPrizes = '$1,000+ in prizes',
+  totalPrizePool,
   otherPrizes,
   prizes,
 }: HackathonPrizesProps) {
+  const firstThreePrizes = prizes.slice(0, 3);
+  const remainingPrizes = prizes.slice(3);
+
   return (
     <div className='space-y-6 py-8'>
       <div>
         <h2 className='text-primary mb-4 text-2xl font-bold'>{title}</h2>
         <div className='flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4'>
-          <span className='text-sm text-white/90'>{totalPrizes}</span>
+          <span className='text-sm text-white/90'>{totalPrizePool} USDC</span>
           {otherPrizes && (
             <span className='text-xs text-[#a7f950]'>+ {otherPrizes}</span>
           )}
         </div>
       </div>
 
-      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-        {prizes.map((prize, index) => (
-          <div
-            key={index}
-            className='rounded-lg border border-[#a7f950]/30 bg-gradient-to-br from-[#a7f950]/10 to-transparent p-6 transition-colors hover:border-[#a7f950]/50'
-          >
-            <div className='mb-4 flex items-start gap-3'>
-              <span className='text-2xl'>{prize.icon || '⭐'}</span>
-              <div>
-                <h3 className='text-lg font-bold text-white'>{prize.title}</h3>
-                <p className='text-xs text-white/60'>{prize.rank}</p>
+      {/* First 3 prizes in cards */}
+      {firstThreePrizes.length > 0 && (
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+          {firstThreePrizes.map((prize, index) => (
+            <div
+              key={index}
+              className='rounded-lg border border-[#a7f950]/30 bg-gradient-to-br from-[#a7f950]/10 to-transparent p-6 transition-colors hover:border-[#a7f950]/50'
+            >
+              <div className='mb-4 flex items-start gap-3'>
+                <span className='text-2xl'>
+                  {index === 0
+                    ? '🥇'
+                    : index === 1
+                      ? '🥈'
+                      : index === 2
+                        ? '🥉'
+                        : '⭐'}
+                </span>
+                <div>
+                  <h3 className='text-lg font-bold text-white'>
+                    {prize.position}
+                  </h3>
+                  <p className='text-xs text-white/60'>{prize.position}</p>
+                </div>
               </div>
-            </div>
 
-            <div className='space-y-3'>
-              <div className='text-base font-bold text-[#a7f950]'>
-                {prize.prize}
+              <div className='space-y-3'>
+                <div className='text-base font-bold text-[#a7f950]'>
+                  {prize.amount} {prize.currency || 'USDC'}
+                </div>
               </div>
-              <ul className='space-y-2'>
-                {prize.details.map((detail, i) => (
-                  <li key={i} className='flex gap-2 text-sm text-white/70'>
-                    <span className='flex-shrink-0 text-[#a7f950]'>✓</span>
-                    <span>{detail}</span>
-                  </li>
-                ))}
-              </ul>
             </div>
+          ))}
+        </div>
+      )}
+
+      {remainingPrizes.length > 0 && (
+        <div className='w-full pt-8'>
+          <div className='overflow-x-auto'>
+            <table className='w-full'>
+              <thead>
+                <tr className='border-b border-white/10'>
+                  <th className='text-primary px-4 py-3 text-left text-sm font-bold'>
+                    POSITION
+                  </th>
+                  <th className='text-primary px-4 py-3 text-left text-sm font-bold'>
+                    PRIZE AMOUNT
+                  </th>
+                  <th className='text-primary px-4 py-3 text-left text-sm font-bold'>
+                    CURRENCY
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {remainingPrizes.map((prize, index) => (
+                  <tr
+                    key={index}
+                    className='border-b border-white/10 transition-colors hover:bg-white/5'
+                  >
+                    <td className='px-4 py-4 text-left text-sm text-white'>
+                      {prize.position}
+                    </td>
+                    <td className='px-4 py-4 text-left text-sm text-white/70'>
+                      {prize.amount}
+                    </td>
+                    <td className='px-4 py-4 text-left text-sm text-white/70'>
+                      {prize.currency || 'USDC'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
-        ))}
-      </div>
+        </div>
+      )}
     </div>
   );
 }