Make accordion styling as a component

Author: hypha

src/components/accordion/accordion.tsx

@@ -0,0 +1,29 @@
+import { clsx } from "clsx";
+
+export const Accordion = ({
+  title,
+  children,
+  id,
+}: {
+  title: string;
+  children: React.ReactNode;
+  id: string;
+}) => {
+  return (
+    <details className="group mb-4">
+      <summary
+        aria-expanded="false"
+        aria-controls={id}
+        className={clsx(
+          "cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
+        )}
+      >
+        <span className="font-semibold">{title}</span>
+        <span aria-hidden="true" className="group-open:hidden">+</span>
+        <span aria-hidden="true" className="group-open:block hidden">−</span>
+      </summary>
+
+      <div id={id} className="pl-4">{children}</div>
+    </details>
+  );
+};

src/components/accordion/index.tsx

@@ -0,0 +1 @@
+export { Accordion } from "./accordion";

src/pages/[...slug].astro

@@ -14,6 +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";
 
 export async function getStaticPaths() {
   const posts = await getCollection("pages");
@@ -48,6 +49,7 @@ const description = post.data.subtitle;
         Note,
         SponsorTiers,
         hr: Separator,
+        Accordion
       }}
     />
   </Prose>