<EventPanel>を実装した

src/components/EventPanel.astro

@@ -0,0 +1,54 @@
+---
+import { getCollection } from 'astro:content';
+import { LayoutGrid } from 'lucide-astro';
+import ButtonLink from './ButtonLink.astro';
+import ColoredContainer from './ColoredContainer.astro';
+import ColoredHeading from './ColoredHeading.astro';
+import EventCard from './EventCard.astro';
+
+const EventSlugs = (await getCollection('events'))
+  .sort((a, b) => {
+    return a.data['starts-at'].getTime() - b.data['starts-at'].getTime();
+  })
+  .map(event => {
+    return event.slug;
+  }) satisfies string[];
+---
+
+<ColoredContainer color="violet" class="max-w-[1250px] flex-col">
+  <div class="w-full flex justify-between items-center">
+    <ColoredHeading as="h3" class="text-3xl" text="イベント" color="violet" />
+    <p
+      class="text-lg font-Dela text-mauve-11 text-stroke-mauve-1 text-stroke-8 paint-sfm drop-shadow-bump shadow-mauve-6 hidden md:block"
+    >
+      この時限りの演奏と催しを楽しもう
+    </p>
+    <ButtonLink color="violet" href="/event">
+      <LayoutGrid class="w-6 h-6 stroke-[2px] stroke-mauve-3" />
+      一覧を開く
+    </ButtonLink>
+  </div>
+  <div class="flex gap-10 overflow-x-scroll hidden-scrollbar">
+    {
+      EventSlugs.map((slug) => {
+        return (
+          <span class="self-stretch w-36">
+            <EventCard type="grid" slug={slug} class="w-36" />
+          </span>
+        );
+      })
+    }
+  </div>
+</ColoredContainer>
+
+<style>
+  .hidden-scrollbar {
+    overflow: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .hidden-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+</style>

src/components/HeroSlideShow.astro

@@ -20,6 +20,7 @@ const { class: className, ...props } = Astro.props;
 ---
 
 <div
+  id="HeroSlideShow"
   class:list={[
     "light swiper flex justify-center items-center overflow-hidden",
     className,
@@ -108,7 +109,7 @@ const { class: className, ...props } = Astro.props;
   import { Pagination } from "swiper/modules";
   import "swiper/css/bundle";
   //@ts-ignore TS6133: ts(6133): 'swiper' is declared but its value is never read.
-  const swiper = new Swiper(".swiper", {
+  const HeroSlideShow = new Swiper("#HeroSlideShow", {
     modules: [Pagination],
     loop: true,
     pagination: {