add images for meetups, add chicago event, add logic to init state utilizing nearest event date index for carousel

community/events.page.tsx

@@ -740,7 +740,7 @@ const events = [
     end_date: "September 4, 2024",
   },
   {
-    name: "XRPL Community After Hours",
+    name: "XRPL Zone Seoul After Hours",
     description:
       "Celebrate with the XRP Community during Korea Blockchain Week! Don't miss this opportunity to mingle with the vibrant XRP community, visionary XRPL developers, trailblazing innovators, and influential investors.",
     type: "meetup",
@@ -783,17 +783,39 @@ const events = [
     image: hackathon,
     end_date: "September 1, 2024",
   },
+  {
+    name: "XRP Community Day Tokyo",
+    description:
+      "​Join senior execs from Ripple, prominent Japanese institutions, and the XRP community for a day of inspiration, networking and insights.",
+    type: "meetup",
+    link: "https://events.xrplresources.org/toyko-community-2024",
+    location: "Shinagawa, Tokyo",
+    date: "September 6, 2024",
+    image: require('../static/img/events/event-meetup-tokyo-day.png'),
+    end_date: "September 6, 2024",
+  },
   {
     name: "XRP Community Night Tokyo",
     description:
-      "​Celebrate with the XRP Community in Tokyo! Don’t miss this opportunity to mingle with the vibrant XRP community, visionary developers, trailblazing innovators, and influential VCs.",
-    type: "conference",
+      "​Celebrate with the XRP Community in Tokyo! Don't miss this opportunity to mingle with the vibrant XRP community, visionary developers, trailblazing innovators, and influential VCs.",
+    type: "meetup",
     link: "https://lu.ma/84do37p7",
     location: "Shinagawa, Tokyo",
     date: "September 6, 2024",
-    image: conference,
+    image: require('../static/img/events/event-meetup-tokyo-night.png'),
     end_date: "September 6, 2024",
   },
+  {
+    name: "Chicago XRP Ledger Meet Up",
+    description:
+      "Hey Chicago XRP Ledger community! We're hosting a meetup soon—come hang out, share ideas, and talk all things XRPL. Would love to see you there!",
+    type: "meetup",
+    link: "https://lu.ma/74dulzff",
+    location: "Chicago, IL",
+    date: "September 12, 2024",
+    image: require('../static/img/events/chicago-meetup.png'),
+    end_date: "September 12, 2024",
+  },
 ];
 
 export default function Events() {

community/index.page.tsx

@@ -21,8 +21,8 @@ const korea = require("../static/img/events/SouthKoreaMeetup.png");
 const findNearestUpcomingEvent = (events) => {
   let nearestEvent = null;
   let nearestDateDiff = Infinity;
-
-  events.forEach((event) => {
+  let index;
+  events.forEach((event, i) => {
     const eventStartDate = moment(event.start_date, "MMMM DD, YYYY");
     const currentDate = moment();
     const diff = eventStartDate.diff(currentDate, "days");
@@ -30,10 +30,11 @@ const findNearestUpcomingEvent = (events) => {
     if (diff >= 0 && diff < nearestDateDiff) {
       nearestEvent = event;
       nearestDateDiff = diff;
+      index = i
     }
   });
 
-  return { nearestEvent, nearestDateDiff };
+  return { nearestEvent, nearestDateDiff, index };
 };
 
 const events = [
@@ -233,11 +234,11 @@ const events = [
     name: "XRP Community Day Tokyo",
     description:
       "Join senior execs from Ripple, prominent Japanese institutions, and the XRP community for a day of inspiration, networking and insights.",
-    type: "conference",
+    type: "meetup",
     link: "https://events.xrplresources.org/toyko-community-2024",
     location: "Shinagawa, Tokyo",
     date: "September 6, 2024",
-    image: conference,
+    image: require('../static/img/events/event-meetup-tokyo-day.png'),
     start_date: "September 6, 2024",
     end_date: "September 6, 2024",
   },
@@ -245,21 +246,32 @@ const events = [
     name: "XRP Community Night Tokyo",
     description:
       "​Celebrate with the XRP Community in Tokyo! Don't miss this opportunity to mingle with the vibrant XRP community, visionary developers, trailblazing innovators, and influential VCs.",
-    type: "conference",
+    type: "meetup",
     link: "https://lu.ma/84do37p7",
     location: "Shinagawa, Tokyo",
     date: "September 6, 2024",
-    image: conference,
+    image: require('../static/img/events/event-meetup-tokyo-night.png'),
     start_date: "September 6, 2024",
     end_date: "September 6, 2024",
   },
+  {
+    name: "Chicago XRP Ledger Meet Up",
+    description:
+      "Hey Chicago XRP Ledger community! We’re hosting a meetup soon—come hang out, share ideas, and talk all things XRPL. Would love to see you there!",
+    type: "meetup",
+    link: "https://lu.ma/74dulzff",
+    location: "Chicago, IL",
+    date: "September 12, 2024",
+    image: require('../static/img/events/chicago-meetup.png'),
+    start_date: "September 12, 2024",
+    end_date: "September 12, 2024",
+  },
 ];
-const { nearestDateDiff, nearestEvent } = findNearestUpcomingEvent(events);
+const { nearestDateDiff, nearestEvent, index } = findNearestUpcomingEvent(events);
 const XrplEventsAndCarouselSection = ({ events }) => {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const [currentIndex, setCurrentIndex] = useState(12);
-
+  const [currentIndex, setCurrentIndex] = useState(index); // use nearest event's index as init state
   const updateCarousel = () => {
     const prevEvent = events[currentIndex - 1] || null;
     const currentEvent = events[currentIndex];