cleanup-hack/src/components/Questions.astro at 668d7ae8d61475e5125c7e2fdf2c21102ad86abb · scesi/cleanup-hack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
---
interface Question {
  question: string;
  answer: string;
}

export interface Props {
  id?: string;
  title?: string;
  subtitle?: string;
  questions: Question[];
}

const { id = 'questions', questions } = Astro.props as Props;
---

<section id={id} class="scroll-mt-28 py-16 sm:py-20 md:py-24" aria-labelledby={`${id}-title`}>
  <div class="flex flex-col items-start text-white md:mx-40 mx-6">
    {
      questions.map((question) => (
        <details class="p-2 group">
          <summary class="cursor-pointer list-none">
            <span class="md:text-2xl text-lg">{question.question}</span>
            <span class="ml-2 text-3xl transition-transform duration-200">
              <span class="group-open:hidden">+</span>
              <span class="hidden group-open:inline">−</span>
            </span>
          </summary>

          <div class="py-4 md:px-16 px-6 md:text-base text-sm">
            <p>{question.answer}</p>
          </div>
        </details>
      ))
    }
  </div>
</section>