Add the Frequently Asked Questions component to website

astro/src/components/web/FrequentlyAskedQuestions.astro

@@ -0,0 +1,22 @@
+---
+import { markdownToHtml } from '@/lib/markdown';
+import { QuestionList } from '@/components/web/subcomponents/QuestionList.tsx';
+
+interface Props {
+    faq: FrequentlyAskedQuestionsComponent;
+}
+
+const faq = Astro.props.faq;
+---
+
+<div class="flex lg:flex-row flex-col justify-between py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18">
+    <div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
+        <h2 class="text-5xl font-bold">{faq.title}</h2>
+        { faq.text !== null && (
+            <div set:html={markdownToHtml(faq.text)}></div>
+        ) }
+    </div>
+    <div class="lg:w-[50%] w-full">
+        <QuestionList client:load questions={faq.questions} />
+    </div>
+</div>

astro/src/components/web/subcomponents/QuestionList.tsx

@@ -0,0 +1,34 @@
+import { useState } from "preact/hooks";
+
+export function QuestionList(props: { questions: FrequentlyAskedQuestion[]; }) {
+    const [ open, setOpen ] = useState<number | null>(null);
+
+    const toggle = (index: number) => {
+        setOpen(open === index ? null : index);
+    };
+
+    return (
+        <div class="w-full">
+            { props.questions.map((question, index: number) => (
+                <div
+                    onClick={() => toggle(index)}
+                    key={index}
+                    className={`w-full overflow-hidden border-l border-r border-t ${open === index && "bg-amber-200"} ${index !== 0 && (index + 1 !== props.questions.length) && "border-amber-300"} ${index === 0 && "rounded-t-2xl border-t border-amber-300"} ${(index + 1) === props.questions.length && "rounded-b-2xl border-b border-amber-300 shadow-md"}`}
+                >
+                    <h4 class={`text-lg font-semibold transition py-3 px-5 select-none cursor-pointer`}>{ question.question }</h4>
+                    <div
+                        className={`grid transition-all duration-300 ease-in-out ${
+                            open === index ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+                        }`}
+                    >
+                        <div className="overflow-hidden">
+                            <div className="px-5 py-3 bg-white text-sm text-gray-700">
+                                {question.answer}
+                            </div>
+                        </div>
+                    </div>
+                </div>  
+            )) }
+        </div>  
+    )
+}

astro/src/components/webpage/Webpage.astro

@@ -1,4 +1,5 @@
 ---
+import FrequentlyAskedQuestions from '../web/FrequentlyAskedQuestions.astro';
 import Hero from '../web/Hero.astro';
 import TextWithImage from '../web/TextWithImage.astro';
 import UpcomingEvents from '../web/UpcomingEvents.astro';
@@ -20,6 +21,7 @@ console.log(Astro.props.webpage);
             { component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
             { component.component === "WallOfText" && <WallOfText wallOfText={component} /> }
             { component.component === "UpcomingEvents" && <UpcomingEvents upcomingEvents={component} /> }
+            { component.component === "FrequentlyAskedQuestions" && <FrequentlyAskedQuestions faq={component} /> }
         </Fragment>
     )) }
 </div>

astro/src/types/components/faq.d.ts

@@ -3,7 +3,7 @@ type FrequentlyAskedQuestionsComponent = {
 
     id: string;
     title: string;
-    text: string;
+    text: string | null;
     questions: FrequentlyAskedQuestion[];
 }