Feature/sponsor list

src/components/top/Sponsors.astro

@@ -0,0 +1,91 @@
+---
+import SectionTitle from "../ui/SectionTitle.astro";
+import SponsorList from "./sponsor/SponsorList.astro";
+import GopherList from "./sponsor/GopherList.astro";
+import {
+  goldSponsors,
+  silverSponsors,
+  drinkSponsors,
+  lunchSponsors,
+  bronzeSponsors,
+  gopherSponsors,
+  toolSponsors,
+} from "./sponsors";
+
+if (
+  goldSponsors.length === 0 &&
+  silverSponsors.length === 0 &&
+  drinkSponsors.length === 0 &&
+  lunchSponsors.length === 0 &&
+  bronzeSponsors.length === 0 &&
+  gopherSponsors.length === 0 &&
+  toolSponsors.length === 0
+) {
+  return null;
+}
+---
+
+<section id="sponsors">
+  <SectionTitle>
+    <span class="section-title">
+      <span style="color: var(--text-accent);">ス</span>ポンサー
+    </span>
+  </SectionTitle>
+
+  <SponsorList
+    size="learge"
+    sponsors={goldSponsors}
+    dialogSectionTitle="Goルドスポンサー"
+  >
+    <span style="color: var(--text-accent);">Go</span>ルド
+  </SponsorList>
+  <SponsorList
+    size="medium"
+    sponsors={silverSponsors}
+    dialogSectionTitle="シルバースポンサー">シルバー</SponsorList
+  >
+  <SponsorList
+    size="medium"
+    sponsors={drinkSponsors}
+    dialogSectionTitle="ドリンクスポンサー">ドリンク</SponsorList
+  >
+  <SponsorList
+    size="medium"
+    sponsors={lunchSponsors}
+    dialogSectionTitle="ランチスポンサー">ランチ</SponsorList
+  >
+  <SponsorList size="small" sponsors={bronzeSponsors}>ブロンズ</SponsorList>
+  <GopherList sponsors={gopherSponsors}>Gopher</GopherList>
+  <SponsorList size="learge" sponsors={toolSponsors}
+    >ツールスポンサー</SponsorList
+  >
+</section>
+
+<style>
+  section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-l) var(--space-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+    align-items: center;
+  }
+
+  .section-title {
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
+  .sponsor-section {
+    text-align: center;
+  }
+
+  @media screen and (max-width: 768px) {
+    section {
+      padding: var(--space-m) var(--space-s);
+      gap: var(--space-s);
+    }
+  }
+</style>

src/components/top/sponsor/Dialog.astro

@@ -0,0 +1,135 @@
+---
+import { Image } from "astro:assets";
+import type { Sponsor } from "../sponsors";
+import Tag from "../../ui/Tag.astro";
+import TextLink from "../../ui/TextLink.astro";
+
+import CloseIcon from "../../../assets/icons/close.svg";
+
+interface Props {
+  openId: string;
+  sponsorSectionTitle: string;
+  sponsor: Sponsor;
+}
+
+const { openId, sponsorSectionTitle, sponsor } = Astro.props;
+---
+
+<style>
+  .sponsor-dialog {
+    padding: 0;
+    border-radius: 32px;
+    border: none;
+  }
+
+  .sponsor-dialog-close {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--surface-secondary-dark);
+    color: var(--text-on-fill);
+    border-radius: 50%;
+    font-weight: 700;
+    position: absolute;
+    right: 32px;
+    top: 32px;
+    cursor: pointer;
+  }
+
+  .close-icon {
+    display: inline;
+    fill: var(--text-on-fill);
+    width: 32px;
+    height: 32px;
+  }
+
+  h4 {
+    margin: 0;
+  }
+
+  .sponsor-dialog-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 600px;
+  }
+
+  .sponsor-dialog-header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xxs);
+    padding: var(--space-m);
+  }
+
+  .sponsor-dialog-body {
+    text-align: center;
+    padding: var(--space-m);
+    background-color: var(--surface-secondary);
+  }
+
+  @media screen and (max-width: 768px) {
+    .sponsor-dialog-header {
+      padding: var(--space-m) var(--space-xs);
+    }
+
+    .sponsor-dialog-content {
+      width: 358px;
+    }
+
+    .sponsor-logo {
+      width: 326px;
+      height: 120px;
+    }
+
+    .sponsor-dialog-close {
+      right: 16px;
+      top: 16px;
+    }
+  }
+</style>
+
+<dialog id={openId} class="sponsor-dialog">
+  <div class="sponsor-dialog-content">
+    <div class="sponsor-dialog-header">
+      <Tag text={sponsorSectionTitle} />
+      <div
+        class="sponsor-dialog-close"
+        onclick={`document.getElementById('${openId}').close()`}
+      >
+        <CloseIcon class="close-icon" />
+      </div>
+      <Image
+        src={sponsor.imageSrc}
+        alt={sponsor.name}
+        width={520}
+        height={120}
+        loading="lazy"
+        class="sponsor-logo"
+      />
+      <h4 class="text-h4">{sponsor.name}</h4>
+      {
+        sponsor.dialog?.link && (
+          <div>
+            <TextLink
+              href={sponsor.dialog.link}
+              text={sponsor.dialog.link}
+              isAccentColor
+            />
+          </div>
+        )
+      }
+    </div>
+    {
+      sponsor.dialog?.description !== "" && (
+        <div class="sponsor-dialog-body text-body-medium">
+          <span>{sponsor.dialog?.description}</span>
+        </div>
+      )
+    }
+  </div>
+</dialog>

src/components/top/sponsor/GopherList.astro

@@ -0,0 +1,90 @@
+---
+import { Image } from "astro:assets";
+import type { Sponsor } from "../sponsors";
+
+interface Props {
+  sponsors: Sponsor[];
+}
+
+const { sponsors } = Astro.props;
+
+if (sponsors.length === 0) {
+  return null;
+}
+---
+
+<div class="sponsor-section">
+  <h4 class="text-h4">
+    <slot />
+  </h4>
+  <ul>
+    {
+      sponsors.map((sponsor) => (
+        <li>
+          <Image
+            src={sponsor.imageSrc}
+            alt={sponsor.name}
+            width={96}
+            height={96}
+            loading="lazy"
+            priority
+          />
+          <div>{sponsor.name}</div>
+        </li>
+      ))
+    }
+  </ul>
+</div>
+
+<style>
+  .sponsor-section {
+    text-align: center;
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    gap: 40px;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  li {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  img {
+    object-fit: contain;
+    border-radius: 50%;
+    display: block;
+    margin: 0 auto;
+  }
+
+  @media screen and (max-width: 1150px) {
+    ul {
+      grid-template-columns: repeat(4, auto);
+    }
+  }
+
+  @media screen and (max-width: 920px) {
+    ul {
+      grid-template-columns: repeat(3, auto);
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      grid-template-columns: repeat(2, auto);
+      gap: 8px;
+    }
+  }
+</style>