add faq

superpage/src/components/Faq.jsx

@@ -0,0 +1,61 @@
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
+
+export function Faq({ topics }) {
+  return (
+    <>
+      {topics?.map((topic, idx) => (
+        <ListItem defaultOpen={false} key={idx}>
+          <ListButton>
+            {idx + 1}. {topic}
+          </ListButton>
+          <ListPanel>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit
+              amet neque id libero semper vulputate a ut ex. Pellentesque semper
+              ultrices mi in efficitur.
+            </p>
+            <p>
+              Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu
+              commodo sem. Suspendisse ac lobortis massa, ac mattis mauris.
+              Integer malesuada bibendum ante, sed consequat augue convallis et.
+            </p>
+          </ListPanel>
+        </ListItem>
+      ))}
+    </>
+  )
+}
+
+export function ListItem({ children, ...props }) {
+  return (
+    <Disclosure
+      as="div"
+      className="bg-white/10 rounded-lg w-full data-open:bg-white/15"
+      {...props}
+    >
+      {children}
+    </Disclosure>
+  )
+}
+
+export function ListButton({ children }) {
+  return (
+    <DisclosureButton className="group flex items-center justify-between w-full px-5 py-3 cursor-pointer">
+      <span className="text-left">{children}</span>
+      <ChevronDownIcon className="size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180" />
+    </DisclosureButton>
+  )
+}
+
+export function ListPanel({ children }) {
+  return (
+    <DisclosurePanel className="text-sm/6 text-white/70 space-y-2 px-5 pb-3">
+      {children}
+    </DisclosurePanel>
+  )
+}