✨feat: update kanto event (#1119)

* ✨feat: update kanto event

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

app/carousel.tsx

@@ -372,6 +372,36 @@ export function Attention(): JSX.Element {
 
 export function ReviewCarousel(): JSX.Element {
   const reviews: Review[] = [
+    {
+      description:
+        "子供はこの3日間でお友達もでき、\nとても楽しかったようで\n「こどもテックキャラバン今度は\nいつあるの？また行けるの？」と\n言っています。\nまたLEDライトもとても気に入り、\n「作ってくれてありがとう！」を\n連発しています。\n親の私達も謎解きを\n他の親御さんと一緒に\n本気で挑んだりと、\n予想以上に楽しいひと時でした。",
+      areaAndUser: "第1回 関東 小2",
+    },
+    {
+      description:
+        "このような親子で学べる体験\nイベントの開催をしていただき\nありがとうございました。\n自分のやりたいことを\nみつけるヒントや体験、\n学びを通して様々な\n気づきがありました。\n学校や習い事では\n経験できない事がたくさんあり\n社会全体で日本の将来を\n考える取り組みをされていて\n凄いなと思います。",
+      areaAndUser: "第1回 関東 小2、小3",
+    },
+    {
+      description:
+        "非常に充実したイベントでした。\n特にプログラミングでは、\n親の力を借りず、子供自身で\nスタッフの方の助言をもらい\n試行錯誤し、最終的に、\n目的を達成し、貴重な成功体験を\n経験させていただき、\n子供たちは今回のことで\n大変自信が付き、\nたくさんの学びがありました。\nありがとうございました。",
+      areaAndUser: "第1回 関東 小2、小5",
+    },
+    {
+      description:
+        "3日間だけではなく、\nもっと長くやりたい。\n\nロボサバ大会をもっとやりたい。\n大人の大会もやってほしい。\nアドバイスや、\n応援する側にもなってみたい。\n\nプログラミングだけでなく、\n様々な体験もできて、\nとても楽しかった。\n絶対また参加したい。",
+      areaAndUser: "第1回 関東 小2、小5",
+    },
+    {
+      description:
+        "3日間とも内容が非常に濃く、\n親子とも楽しみながら\n学ぶことができました。\n最終日の大会やチャペル入場では\n涙ぐんでしまい、まさかこんな\n感動があるとは参加を決めた\n時には思いもよりませんでした。\n本当に無料で良かったの\nでしょうか…。\n一緒に参加させてもらった5歳の\n弟も、次はロボットつくりたい！\nと意気込んでおります。",
+      areaAndUser: "第1回 関東 小3",
+    },
+    {
+      description:
+        "親子共に楽しめるイベントを\n行っていただき\nありがとうございます。\n3日間を通じてほかのお友達や\nスタッフの方とも親近感を持って\n楽しく過ごせました。\n\nまた機会があれば、\n今回は年齡制限で\n参加できなかった\n兄弟も含めて参加させて\nもらいたいと思います。",
+      areaAndUser: "第1回 関東 小5",
+    },
     {
       description:
         "ロボットを使った\nプログラミングは、\n子供の興味を惹いて\nとても楽しそうでした。\n\nプログラミングだけでなく\nロボット作成やハンダ付けも\n楽しかったみたいです。\n\n自分一人で作成する\n達成感が味わえる講習が\n良かったのだと思いました。",

app/components/button/lineAddFriends.tsx

@@ -43,12 +43,13 @@ export function LineApply({
 }
 
 export function LineRegister({
+  areaName,
   lineLink,
-}: Readonly<{ lineLink: string }>): JSX.Element {
+}: Readonly<{ areaName: string; lineLink: string }>): JSX.Element {
   return (
     <section className="bg-amber-50 mx-auto p-4 rounded-2xl space-y-2 text-center w-fit">
       <b>
-        LINE公式アカウントから、
+        {areaName}LINE公式アカウントから、
         <br />
         次回開催の通知を受け取れます。
       </b>

app/footer.tsx

@@ -7,7 +7,9 @@ export function Footer(): JSX.Element {
   return (
     <footer className="bg-stone-200 text-center text-sm sm:text-base">
       <nav>
-        <ul className="font-bold gap-1 grid grid-cols-3 justify-center mx-auto p-1 w-fit sm:gap-6 sm:grid-cols-5">
+        <ul
+          className={`font-bold gap-1 grid justify-center mx-auto p-1 w-fit sm:gap-6 ${NAVIGATION.length === 5 ? "grid-cols-3 sm:grid-cols-5" : "grid-cols-2 sm:grid-cols-4"}`}
+        >
           {NAVIGATION.map((menu) => (
             <li key={menu.name}>
               <Link

app/history/image/[area]/[date]/[image]/page.tsx

@@ -24,14 +24,25 @@ export function generateStaticParams(): {
   date: string
   image: string
 }[] {
+  const kantoArea: string = KANTO.pathname.split("/")[1]
+  const kantoParams: { area: string; date: string; image: string }[] =
+    KANTO_HISTORY.flatMap((eventDate) =>
+      eventDate.pictures.map((picture) => ({
+        area: kantoArea,
+        date: eventDate.date,
+        image: picture.src.split("/").reverse()[0].split(".")[0],
+      })),
+    )
   const hiroshimaArea: string = HIROSHIMA.pathname.split("/")[1]
-  return HIROSHIMA_HISTORY.flatMap((eventDate) =>
-    eventDate.pictures.map((picture) => ({
-      area: hiroshimaArea,
-      date: eventDate.date,
-      image: picture.src.split("/").reverse()[0].split(".")[0],
-    })),
-  )
+  const hiroshimaParams: { area: string; date: string; image: string }[] =
+    HIROSHIMA_HISTORY.flatMap((eventDate) =>
+      eventDate.pictures.map((picture) => ({
+        area: hiroshimaArea,
+        date: eventDate.date,
+        image: picture.src.split("/").reverse()[0].split(".")[0],
+      })),
+    )
+  return [...kantoParams, ...hiroshimaParams]
 }
 
 export default async function HistoryPicture({

app/history/movie/[area]/[date]/page.tsx

@@ -18,11 +18,20 @@ export const metadata: Metadata = {
 }
 export const dynamicParams: boolean = false
 export function generateStaticParams(): { area: string; date: string }[] {
+  const kantoArea: string = KANTO.pathname.split("/")[1]
+  const kantoParams: { area: string; date: string }[] = KANTO_HISTORY.map(
+    (eventDate) => ({
+      area: kantoArea,
+      date: eventDate.date,
+    }),
+  )
   const hiroshimaArea: string = HIROSHIMA.pathname.split("/")[1]
-  return HIROSHIMA_HISTORY.map((eventDate) => ({
-    area: hiroshimaArea,
-    date: eventDate.date,
-  }))
+  const hiroshimaParams: { area: string; date: string }[] =
+    HIROSHIMA_HISTORY.map((eventDate) => ({
+      area: hiroshimaArea,
+      date: eventDate.date,
+    }))
+  return [...kantoParams, ...hiroshimaParams]
 }
 
 export default async function Movie({

app/history/page.tsx

@@ -1,10 +1,14 @@
 import { LineRegister } from "@/app/components/button/lineAddFriends"
 import { Heading } from "@/app/components/layout/heading"
+import type { History } from "@/app/interfaces/history.ts"
 import {
   HIROSHIMA,
   HIROSHIMA_HISTORY,
   HIROSHIMA_LINE,
   HISTORY,
+  KANTO,
+  KANTO_HISTORY,
+  KANTO_LINE,
 } from "@/app/lib/constant"
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline"
 import type { Metadata } from "next"
@@ -18,43 +22,58 @@ export const metadata: Metadata = {
   title: "活動実績",
 }
 
-export default function History(): JSX.Element {
+export default function HistoryPage(): JSX.Element {
+  const histories: History[] = [
+    {
+      area: KANTO,
+      history: KANTO_HISTORY,
+      lineLink: KANTO_LINE,
+    },
+    {
+      area: HIROSHIMA,
+      history: HIROSHIMA_HISTORY,
+      lineLink: HIROSHIMA_LINE,
+    },
+  ] as const
+
   return (
     <>
       <Heading menus={[HISTORY]} />
-      <h2 className="font-bold font-zenMaruGothic text-3xl">
-        {HIROSHIMA.name}
-      </h2>
-      {HIROSHIMA_HISTORY.map((history) => (
-        <section key={history.date} className="space-y-4 px-2">
-          <details className={`group w-full ${styles.details}`}>
-            <summary className="block bg-amber-50 font-bold font-zenMaruGothic p-4 relative rounded-2xl text-2xl group-open:rounded-b-none">
-              <p className="absolute outline outline-offset-2 rounded text-rose-400 text-xs -rotate-45">
-                大好評で
-                <br />
-                開催終了
-              </p>
-              <span className="ml-8 sm:ml-0">{history.title}</span>
-            </summary>
-            <Programs programs={history.programs} />
-            <PictureTile
-              pathname={HIROSHIMA.pathname}
-              date={history.date}
-              pictures={history.pictures}
-            />
-            <Link
-              href={`${HISTORY.pathname}/movie${HIROSHIMA.pathname}/${history.date}`}
-              className={`bg-sky-400 button-pop duration-200 ease-out flex font-bold gap-2 items-center justify-center h-12 mt-2 mx-auto px-4 rounded-2xl shadow-lg text-lg text-white w-fit ${styles.blueShine}`}
-            >
-              イベントの様子はこちら！
-              <ArrowTopRightOnSquareIcon
-                className={`size-5 ${styles.arrowTopRight}`}
-              />
-            </Link>
-          </details>
+      {histories.map(({ area, history, lineLink }) => (
+        <section key={area.name} className="space-y-6">
+          <h2 className="font-bold font-zenMaruGothic text-3xl">{area.name}</h2>
+          {history.map((history) => (
+            <section key={history.date} className="space-y-4 px-2">
+              <details className={`group w-full ${styles.details}`}>
+                <summary className="block bg-amber-50 font-bold font-zenMaruGothic p-4 relative rounded-2xl text-2xl group-open:rounded-b-none">
+                  <p className="absolute outline outline-offset-2 rounded text-rose-400 text-xs -rotate-45">
+                    大好評で
+                    <br />
+                    開催終了
+                  </p>
+                  <span className="ml-8 sm:ml-0">{history.title}</span>
+                </summary>
+                <Programs programs={history.programs} />
+                <PictureTile
+                  pathname={area.pathname}
+                  date={history.date}
+                  pictures={history.pictures}
+                />
+                <Link
+                  href={`${HISTORY.pathname}/movie${area.pathname}/${history.date}`}
+                  className={`bg-sky-400 button-pop duration-200 ease-out flex font-bold gap-2 items-center justify-center h-12 mt-2 mx-auto px-4 rounded-2xl shadow-lg text-lg text-white w-fit ${styles.blueShine}`}
+                >
+                  イベントの様子はこちら！
+                  <ArrowTopRightOnSquareIcon
+                    className={`size-5 ${styles.arrowTopRight}`}
+                  />
+                </Link>
+              </details>
+            </section>
+          ))}
+          <LineRegister areaName={area.name} lineLink={lineLink} />
         </section>
       ))}
-      <LineRegister lineLink={HIROSHIMA_LINE} />
     </>
   )
 }

app/interfaces/history.ts

@@ -0,0 +1,8 @@
+import type { Menu } from "./menu.ts"
+import type { EventDate } from "./schedule.ts"
+
+export type History = {
+  readonly area: Menu
+  readonly history: EventDate[]
+  readonly lineLink: string
+}