add past event

dig-dao · Dec 16, 2023 · 4751c26 · 4751c26
1 parent de3846a
commit 4751c26
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/layouts/components/EventCard.astro b/src/layouts/components/EventCard.astro
@@ -9,22 +9,22 @@ const {
   summary_length,
   event_folder,
 }: { summary_length: number; event_folder: string } = config.settings;
-const { data } = Astro.props;
+const { data, btnText } = Astro.props;
 const { title, image, date, endtime, url } = data.data;
 ---
 
 <div class="bg-body dark:bg-darkmode-body">
   <div class="md:flex md:flex-row">
-    <div>
+    <div class="max-w-md">
       <a href={url} target="_blank">
         {
           image && (
             <Image
               class="mb-6 w-full rounded"
               src={image}
               alt={title}
-              width={445}
-              height={230}
+              width={300}
+              height={300}
               format="webp"
             />
           )
@@ -48,7 +48,9 @@ const { title, image, date, endtime, url } = data.data;
       <p class="mb-6">
         {plainify(data.body?.slice(0, Number(summary_length)))}
       </p>
-      <a class="btn btn-primary btn-sm" href={url} target="_blank"> 参加する</a>
+      <a class="btn btn-primary btn-sm" href={url} target="_blank"
+        >{btnText ? btnText : "参加する"}</a
+      >
     </div>
   </div>
 </div>
diff --git a/src/pages/events/index.astro b/src/pages/events/index.astro
@@ -9,13 +9,13 @@ const EVENT_FOLDER = "events";
 
 const events = await getSinglePage(EVENT_FOLDER);
 const sortedEvents = sortByDate(events);
-console.log(sortedEvents);
 ---
 
 <Base title={"Events"}>
   <PageHeader title={"Events"} />
   <section class="section">
     <div class="container">
+      <h2 class="title is-2 mb-2">Upcoming Events</h2>
       <!-- blog posts -->
       {
         sortedEvents
@@ -26,6 +26,17 @@ console.log(sortedEvents);
           })
           .map((event) => <EventCard data={event} />)
       }
+      <h2 class="title is-2 mt-4 mb-2">Past Events</h2>
+      <!-- blog posts -->
+      {
+        sortedEvents
+          .filter((event) => {
+            const eventDate = event.data.date;
+            const currentDate = new Date();
+            return eventDate < currentDate;
+          })
+          .map((event) => <EventCard data={event} btnText="閲覧する" />)
+      }
     </div>
   </section>
 </Base>