Merge pull request #146 from tskaigi/feat/subevents-page

サブイベントページ

Author: yuta-ike

app/lib/data.tsx

@@ -1,5 +1,5 @@
 import { IconType } from "react-icons";
-import { FaBook, FaHandshake, FaBan } from "react-icons/fa";
+import { FaBook, FaHandshake, FaBan, FaBolt } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 import { GiPublicSpeaker } from "react-icons/gi";
 import { HiHome } from "react-icons/hi";
@@ -63,6 +63,15 @@ export const pageInfos: PageInfo[] = [
   },
   {
     index: 6,
+    title: "サブイベント",
+    showNavbar: true,
+    showFooter: true,
+    description: "TSKaigiの公認サブイベントです",
+    icon: FaBolt as IconType,
+    href: "/subevents",
+  },
+  {
+    index: 7,
     title: "特定商取引法に基づく表記",
     showNavbar: false,
     showFooter: true,
@@ -879,3 +888,22 @@ EventHubは、マーケティング、営業のためのウェビナー・カン
     },
   ],
 };
+
+export const SUB_EVENTS = [
+  {
+    title: "【学生向け】来年は TSKaigi に登壇するぞ！LT会&交流会で学生エンジニアと繋がろう！",
+    description: `初LT大歓迎！TS好きな学生も触ったことない学生も集まってワイワイ盛り上がろう！
+
+カンファレンスに登壇してるエンジニアってかっこいいですよね！
+
+でも、登壇するにはハードルが高い...そんなあなたに向けて、今回は学生限定のTSKaigiサブイベントとしてLT会を企画しました。
+この機会をきっかけにし、ぜひ来年のTSKaigiではプロポーザルを出しましょう！
+`,
+    sponsorList: ["株式会社Progate", "エムスリー株式会社"],
+    tags: ["学生向け", "公募枠あり", "オンラインあり"],
+    date: "5/17",
+    day: "金",
+    link: "https://progate.connpass.com/event/318009/",
+    thumbnail: "/subevent_5_17.png",
+  }
+];

app/subevents/page.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Container from "../ui/container";
+import { FaExternalLinkAlt } from "react-icons/fa";
+import { SUB_EVENTS } from "../lib/data";
+
+const Tag = ({ children }: { children: string }) => {
+  return (
+    <div className="w-max rounded-full bg-[#345DA7] px-3 py-2 text-sm leading-none text-white">
+      # {children}
+    </div>
+  );
+};
+
+const SubEventPage = () => {
+  return (
+    <Container>
+      <div className="flex flex-col">
+        <h1 className="mt-4 text-2xl font-bold tracking-tight text-accent">
+          TSKaigiのサブイベントに参加しよう！
+        </h1>
+        <p className="mt-6 text-lg leading-7">
+          TSKaigiのスポンサー企業によって実施される、TSKaigiのサブイベントをご紹介します。ご参加お待ちしております！
+        </p>
+        <p className="mt-1 text-sm">※ 正確な情報は各イベントページをご確認ください。</p>
+      </div>
+      <div className="mt-10 flex flex-col gap-8">
+        {SUB_EVENTS.map(({ title, link, description, tags, date, day, thumbnail, sponsorList }) => (
+          <div
+            key={title}
+            className="flex flex-col rounded-xl bg-white p-4 text-slate-800 md:flex-row"
+          >
+            <div className="w-full shrink-0 border-b border-b-slate-200 border-r-slate-200 p-2 pb-4 pr-8 text-3xl md:w-[112px] md:border-b-0 md:border-r md:p-4">
+              {date}
+              <br />
+              <span className="text-xl">({day})</span>
+            </div>
+            <div className="p-2 pt-4 md:p-4">
+              <a href={link} target="_blank" rel="noopener noreferrer">
+                <h2 className="text-xl font-bold underline hover:no-underline">
+                  {title}
+                  <FaExternalLinkAlt className="ml-2 inline" size={14} />
+                </h2>
+              </a>
+              <a href={link} target="_blank" rel="noopener noreferrer">
+                <img src={thumbnail} alt={title} className="mt-4 h-full max-h-[200px]" />
+              </a>
+              <p className="mt-4 whitespace-pre-line">{description}</p>
+              <div className="mt-4 flex flex-wrap gap-2">
+                {tags.map((tag) => (
+                  <Tag key={tag}>{tag}</Tag>
+                ))}
+              </div>
+              <div className="mt-4 w-full text-end text-sm">実施: {sponsorList.join("、")}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Container>
+  );
+};
+
+export default SubEventPage;