mirror of
https://github.com/jimeh/commonflow.org.git
synced 2026-02-19 05:46:40 +00:00
103 lines
3.1 KiB
Plaintext
103 lines
3.1 KiB
Plaintext
---
|
|
import type { FAQItem } from "../utils/parseSpecContent";
|
|
|
|
interface Props {
|
|
items: FAQItem[];
|
|
}
|
|
|
|
const { items } = Astro.props;
|
|
---
|
|
|
|
<section id="faq" class="py-20 sm:py-28">
|
|
<div class="section-container">
|
|
<div class="max-w-3xl mx-auto">
|
|
<!-- Section header -->
|
|
<div class="mb-12 text-center">
|
|
<h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2>
|
|
<p class="text-lg text-gray-600 dark:text-slate-400">
|
|
Common questions about Git Common-Flow
|
|
</p>
|
|
</div>
|
|
|
|
<!-- FAQ Items -->
|
|
<div class="space-y-0">
|
|
{
|
|
items.map((item, index) => (
|
|
<div
|
|
class="border-b border-gray-200 dark:border-slate-800"
|
|
data-faq-item
|
|
>
|
|
<button
|
|
class="flex justify-between items-center w-full py-6 text-left
|
|
font-display text-lg font-semibold cursor-pointer
|
|
transition-colors
|
|
text-gray-950 dark:text-slate-50
|
|
hover:text-sky-600"
|
|
aria-expanded="false"
|
|
data-faq-trigger
|
|
>
|
|
<span class="pr-4">{item.question}</span>
|
|
<svg
|
|
class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-faq-icon
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
|
|
data-faq-content
|
|
>
|
|
<div class="overflow-hidden">
|
|
<div
|
|
class="pb-6 text-gray-600 dark:text-slate-400 prose-spec"
|
|
set:html={item.answer}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function initFAQ() {
|
|
const items = document.querySelectorAll("[data-faq-item]");
|
|
|
|
items.forEach((item) => {
|
|
const trigger = item.querySelector("[data-faq-trigger]");
|
|
const content = item.querySelector("[data-faq-content]");
|
|
const icon = item.querySelector("[data-faq-icon]");
|
|
|
|
if (!trigger || !content || !icon) return;
|
|
|
|
trigger.addEventListener("click", () => {
|
|
const isExpanded = trigger.getAttribute("aria-expanded") === "true";
|
|
|
|
// Toggle current item
|
|
trigger.setAttribute("aria-expanded", isExpanded ? "false" : "true");
|
|
content.classList.toggle("grid-rows-[1fr]", !isExpanded);
|
|
content.classList.toggle("grid-rows-[0fr]", isExpanded);
|
|
icon.classList.toggle("rotate-180", !isExpanded);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Initialize on load
|
|
initFAQ();
|
|
|
|
// Re-initialize on Astro page transitions
|
|
document.addEventListener("astro:after-swap", initFAQ);
|
|
</script>
|