'use client' import Link from 'next/link' import { useState } from "react" import { events } from "@/utility/constant.utils" // import your events array export default function HomeUpcomingEvent() { const [isTab, setIsTab] = useState(1) const handleTab = (i: number) => { setIsTab(i) } // Take only the first 3 events const displayEvents = events.slice(0, 3); return ( <>

Upcoming Events

{displayEvents.map((event, idx) => (
{idx > 0 &&
}

{String(idx + 1).padStart(2, "0")}

{/* Alternating layout */} {idx % 2 === 0 ? ( <>
{event.title}
  • {event.time ? event.time + " - " : ""}{event.date} |
  • {event.location}
{event.title}

{event.desc}

purchase ticket
) : ( <>
  • {event.time ? event.time + " - " : ""}{event.date} |
  • {event.location}
{event.title}

{event.desc}

purchase ticket
{event.title}
)}
))}
) }