2026年度の講習会情報を書くスペースを用意

Author: TakenPt

src/components/workshop/Workshop2026Section.astro

@@ -0,0 +1,49 @@
+---
+import Section from '@/components/common/Section.astro'
+import WorkshopCard from './WorkshopCard.astro'
+import type { ComponentProps } from 'astro/types'
+
+export interface Item
+  extends Omit<ComponentProps<typeof WorkshopCard>, 'date'> {
+  date?: Date
+}
+export function date(
+  month: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12,
+  date: number,
+  hour?: number,
+  minute?: number,
+) {
+  return hour === undefined
+    ? new Date(2026, month - 1, date)
+    : minute === undefined
+      ? new Date(2026, month - 1, date, hour)
+      : new Date(2026, month - 1, date, hour, minute)
+}
+
+export const items: Item[] = []
+
+const dateFormat = new Intl.DateTimeFormat('ja-JP', {
+  weekday: 'short',
+  month: 'numeric',
+  day: 'numeric',
+  // hour: '2-digit',
+  // minute: '2-digit',
+})
+---
+
+<Section background="secondary">
+  <Fragment slot="title">2026年度のOUCCの講習会</Fragment>
+  <div class="flex flex-col gap-5">
+    <p>
+      2026年度の講習会をサーオリ後に発表します。
+      開始時刻や開催場所などの詳細ついては随時更新します。是非お気軽にご参加ください！
+    </p>
+    <ul class="grid grid-cols-[repeat(auto-fit,minmax(18rem,1fr))] gap-5">
+      {
+        items.map(({ date, ...item }) => (
+          <WorkshopCard {...item} date={dateFormat.format(date)} />
+        ))
+      }
+    </ul>
+  </div>
+</Section>

src/components/workshop/WorkshopSection.astro

@@ -15,9 +15,5 @@ import DiscordJoinLink from '@/components/common/button/DiscordJoinLink.astro'
       こちらから講習会の資料や連絡を受け取れます。
       どなたでも無料で参加できます。是非お気軽にご参加ください！
     </p>
-    <p>
-      2026年度の講習会を現在計画中です。
-      2025年度には、以下のような講習会を開催しました。
-    </p>
   </div>
 </Section>

src/pages/workshop.astro

@@ -3,6 +3,7 @@ import Layout from '@/layouts/Layout.astro'
 import Hero from '@/components/common/Hero.astro'
 import WorkshopSection from '@/components/workshop/WorkshopSection.astro'
 import Workshop2025Section from '@/components/workshop/Workshop2025Section.astro'
+import Workshop2026Section from '@/components/workshop/Workshop2026Section.astro'
 ---
 
 <Layout
@@ -13,6 +14,7 @@ import Workshop2025Section from '@/components/workshop/Workshop2025Section.astro
   <Hero title="講習会" copy="一緒に新しい技術を学びませんか？" compact />
   <main>
     <WorkshopSection />
+    <Workshop2026Section />
     <Workshop2025Section />
   </main>
 </Layout>