convert to astro component

Author: hypha

src/components/accordion/accordion.astro

@@ -0,0 +1,24 @@
+---
+export interface Props {
+  title: string;
+  id: string;
+}
+
+const { title, id } = Astro.props;
+---
+
+<details class="group mb-4">
+  <summary
+    aria-expanded="false"
+    aria-controls={id}
+    class="cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
+  >
+    <span class="font-semibold">{title}</span>
+    <span aria-hidden="true" class="group-open:hidden">+</span>
+    <span aria-hidden="true" class="group-open:block hidden">−</span>
+  </summary>
+
+  <div id={id} class="pl-4">
+    <slot />
+  </div>
+</details>

src/components/accordion/accordion.tsx

@@ -14,7 +14,7 @@ import BenefitItem from "../components/benefits-list/benefit-item.astro";
 import { ButtonWithTitle } from "../components/button-with-title";
 import { Note } from "../components/note";
 import { SponsorTiers } from "../components/sponsor-tiers";
-import { Accordion } from "../components/accordion";
+import Accordion from "../components/accordion/accordion.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("pages");