FAQs

Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>

src/components/Questions.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export const Questions = ({ children }) => {
+    return (
+        <div className="questions">
+            {children}
+        </div>
+    );
+};
+
+export const Q = ({ children }) => {
+    const [isAnswerVisible, setIsAnswerVisible] = useState(false);
+    const answerRef = useRef(null);
+    const [answerHeight, setAnswerHeight] = useState(0);
+
+    useEffect(() => {
+        if (answerRef.current) {
+            setAnswerHeight(isAnswerVisible ? answerRef.current.scrollHeight : 0);
+        }
+    }, [isAnswerVisible]);
+
+    const questionText = children[0];
+    const answerComponent = React.Children.toArray(children)[1];
+
+    const arrowClass = isAnswerVisible ? 'question-arrow expanded' : 'question-arrow';
+
+    return (
+        <div className="question" onClick={() => setIsAnswerVisible(!isAnswerVisible)}>
+            <div className="question-header">
+                <span className="question-text">{questionText}</span>
+                <span className={arrowClass}></span>
+            </div>
+            <div className="question-line"></div>
+            <div className="answer" ref={answerRef} style={{ height: `${answerHeight}px` }}>
+                {answerComponent}
+            </div>
+        </div>
+    );
+};
+
+export const A = ({ children }) => {
+    return (
+        <div className="answer">
+            {children}
+        </div>
+    );
+};

src/css/custom.css

@@ -14,6 +14,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
+  --ifm-horizontal-line-color: rgba(28, 30, 33, 0.2);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
@@ -26,5 +27,52 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --ifm-horizontal-line-color: rgba(227, 227, 227, 0.2);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.answer {
+    overflow: hidden;
+    transition: height 0.3s ease-out;
+}
+
+.question-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    position: relative; /* Needed for absolute positioning of the arrow */
+}
+
+.question-header h3 {
+    margin: 0;
+}
+
+.question-arrow {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid var(--ifm-color-primary);
+    border-bottom: 2px solid var(--ifm-color-primary);
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    margin-top: -20px;
+}
+
+.question-arrow.expanded {
+    transform: rotate(225deg);
+}
+
+
+.question-line {
+    border-bottom: 1px solid var(--ifm-horizontal-line-color);
+    margin-top: -15px;
+    margin-bottom: 10px;
+}
+
+.question-text {
+    font-size: 18px;
+}