add frequently-asked-questions

src/app/ui/faq/component/faq-item.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+interface FaqItemProps {
+	question: string;
+	children?: ReactNode | null;
+}
+
+export default function FaqItem({ question, children }: FaqItemProps) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [height, setHeight] = useState(0);
+	const contentRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (contentRef.current) {
+			const scrollHeight = contentRef.current.scrollHeight;
+			if (isOpen) {
+				setHeight(scrollHeight);
+			} else {
+				setHeight(0);
+			}
+		}
+	}, [isOpen]);
+
+	function toggleHandler() {
+		setIsOpen(!isOpen);
+	}
+
+
+	return (
+		<div className="faq-item">
+			<div className="faq-question" onClick={toggleHandler}>
+				<span>{question}</span>
+				<div className="faq-toggle">
+					<svg className={`dropdown-arrow ${isOpen? 'expanded' : ''}`} viewBox="0 0 24 24" fill="currentColor">
+						<path d="M7 10l5 -5 5 5z"></path>
+					</svg>
+				</div>
+			</div>
+			<div
+				className="faq-answer"
+				style={{ height: `${height}px` }}
+			>
+				<div ref={contentRef}>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}