1import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
2import ChevronUpIcon from '@heroicons/react/20/solid/ChevronUpIcon';
3import React from 'react';
4import { useState } from 'react';
5
6export default function QA({ children, q }) {
7  const [visible, setVisible] = useState(false);
8  return (
9    <div className="py-4 px-6 pr-10 bg-lineHighlight relative mb-4">
10      <div className="cursor-pointer" onClick={() => setVisible((v) => !v)}>
11        <div>{q}</div>
12        <a className="p-1 absolute top-4 right-4">
13          {visible ? <ChevronUpIcon className="w-5 h-5" /> : <ChevronDownIcon className="w-5 h-5" />}
14        </a>
15      </div>
16      {visible && <div>{children}</div>}
17    </div>
18  );
19}