スポンサーリストを追加

src/components/top/Sponsors.astro

@@ -0,0 +1,101 @@
+---
+import SectionTitle from "../ui/SectionTitle.astro";
+
+import Gold from "./sponsor/Gold.astro";
+import Silver from "./sponsor/Silver.astro";
+import Drink from "./sponsor/Drink.astro";
+import Lunch from "./sponsor/Lunch.astro";
+import Bronze from "./sponsor/Bronze.astro";
+import Gopher from "./sponsor/Gopher.astro";
+import Tool from "./sponsor/Tool.astro";
+import {
+  goldSponsors,
+  silverSponsors,
+  drinkSponsors,
+  lunchSponsors,
+  bronzeSponsors,
+  gopherSponsors,
+  toolSponsors,
+} from "./sponsors";
+
+const currentLocale = Astro.currentLocale || "ja";
+
+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>
+    {
+      currentLocale === "en" ? (
+        <span class="section-title">
+          <span style="color: var(--text-accent);">S</span>ponsors
+        </span>
+      ) : (
+        <span class="section-title">
+          <span style="color: var(--text-accent);">ス</span>ポンサー
+        </span>
+      )
+    }
+  </SectionTitle>
+  <div class="content">
+    <Gold sponsors={goldSponsors} />
+    <Silver sponsors={silverSponsors} />
+    <Drink sponsors={drinkSponsors} />
+    <Lunch sponsors={lunchSponsors} />
+    <Bronze sponsors={bronzeSponsors} />
+    <Gopher sponsors={gopherSponsors} />
+    <Tool sponsors={toolSponsors} />
+  </div>
+</section>
+
+<style>
+  section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-l) var(--space-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-m);
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-l);
+    width: 100%;
+  }
+
+  .section-title {
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
+  .sponsor-section {
+    text-align: center;
+    width: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    section {
+      padding: var(--space-m) var(--space-s);
+      gap: var(--space-s);
+    }
+
+    .content {
+      max-width: 450px;
+    }
+  }
+</style>

src/components/top/sponsor/Bronze.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;
+}
+
+const currentLocale = Astro.currentLocale || "ja";
+---
+
+<div class="sponsor-section">
+  <h4 class="text-h4">
+    {currentLocale === "ja" ? "ブロンズ" : "Bronze"}
+  </h4>
+  <ul>
+    {
+      sponsors.map((sponsor) => (
+        <li>
+          <Image
+            src={sponsor.imageSrc}
+            alt={sponsor.name}
+            title={sponsor.name}
+            loading="lazy"
+            priority
+          />
+        </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: 20px;
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  li {
+    max-width: 100%;
+  }
+
+  li > img {
+    width: 208px;
+    height: auto;
+    aspect-ratio: 208 / 100;
+    max-width: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
+  li > img:hover {
+    opacity: 0.7;
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      grid-template-columns: repeat(2, auto);
+      column-gap: 16px;
+      row-gap: 8px;
+    }
+
+    li {
+      display: flex;
+      justify-content: center;
+    }
+
+    li > img {
+      width: 163px;
+      aspect-ratio: 163 / 64;
+    }
+  }
+</style>

src/components/top/sponsor/Dialog.astro

@@ -0,0 +1,143 @@
+---
+import { Image } from "astro:assets";
+import type { SponsorWithDialog } from "../sponsors";
+import Tag from "../../ui/Tag.astro";
+import TextLink from "../../ui/TextLink.astro";
+
+import CloseIcon from "../../../assets/icons/close.svg";
+
+interface Props {
+  sponsorSectionTitle: string;
+  sponsor: SponsorWithDialog;
+}
+
+const { 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-logo {
+    aspect-ratio: 520/120;
+    box-sizing: border-box;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+
+  .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 {
+      aspect-ratio: 326/120;
+      box-sizing: border-box;
+      width: 100%;
+      height: auto;
+      object-fit: contain;
+    }
+
+    .sponsor-dialog-close {
+      right: 16px;
+      top: 16px;
+    }
+  }
+</style>
+
+<dialog id={sponsor.dialog.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('${sponsor.dialog.openId}').close()`}
+      >
+        <CloseIcon class="close-icon" />
+      </div>
+      <Image
+        src={sponsor.imageSrc}
+        alt={sponsor.name}
+        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>