@theguild/components
Version:
91 lines (90 loc) • 3.56 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import {
Children,
cloneElement
} from "react";
import * as RadixAccordion from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { cn } from "../../cn";
import { Anchor } from "../anchor";
import { Heading } from "../heading";
import { AttachPageFAQSchema } from "./attach-page-faq-schema";
const UnwrapChild = (props) => props.children;
const a = (props) => /* @__PURE__ */ jsx(
Anchor,
{
className: "hive-focus rounded underline hover:text-blue-700",
...props,
href: props.href,
children: props.children
}
);
const h2 = (props) => /* @__PURE__ */ jsx(Heading, { as: "h2", size: "md", className: "basis-1/2", ...props });
const FrequentlyAskedQuestions = ({ className, faqPages, children }) => {
return /* @__PURE__ */ jsxs(
"section",
{
className: cn(
className,
"flex flex-col gap-x-6 gap-y-2 px-4 py-6 text-green-1000 md:flex-row md:px-10 lg:gap-x-24 lg:px-[120px] lg:py-24"
),
children: [
/* @__PURE__ */ jsx(AttachPageFAQSchema, { faqPages }),
cloneElement(children, {
components: {
a,
h2,
p: UnwrapChild,
ul: Accordion,
li: AccordionItem
}
})
]
}
);
};
const Accordion = (props) => /* @__PURE__ */ jsx(RadixAccordion.Root, { asChild: true, type: "single", collapsible: true, children: /* @__PURE__ */ jsx("ul", { className: "basis-1/2 divide-y divide-beige-400 max-xl:grow", ...props }) });
const AccordionItem = (props) => {
const texts = Children.toArray(props.children).filter((child) => child !== "\n");
if (texts.length === 0) {
return null;
}
if (texts.length < 2) {
console.error(texts);
throw new Error(`Expected a question and an answer, got ${texts.length} items`);
}
const [first, ...answers] = texts;
const question = typeof first === "string" ? first : typeof first === "object" && "type" in first ? first.props.children : null;
if (!question) return null;
return /* @__PURE__ */ jsx(
RadixAccordion.Item,
{
asChild: true,
value: question,
className: "relative pb-0 focus-within:z-10 data-[state=open]:pb-4",
itemScope: true,
itemProp: "mainEntity",
itemType: "https://schema.org/Question",
children: /* @__PURE__ */ jsxs("li", { children: [
/* @__PURE__ */ jsx(RadixAccordion.Header, { children: /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: "hive-focus duration-[.8s] -mx-2 my-1 flex w-[calc(100%+1rem)] items-center justify-between rounded-xl bg-white px-2 py-3 text-left font-medium transition-colors hover:bg-beige-100/80 md:my-2 md:py-4", children: [
/* @__PURE__ */ jsx("span", { itemProp: "name", children: question }),
/* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-5 [[data-state='open']_&]:[transform:rotateX(180deg)]" })
] }) }),
/* @__PURE__ */ jsx(
RadixAccordion.Content,
{
forceMount: true,
className: "overflow-hidden bg-white text-green-800 data-[state=closed]:hidden",
itemScope: true,
itemProp: "acceptedAnswer",
itemType: "https://schema.org/Answer",
children: /* @__PURE__ */ jsx("div", { itemProp: "text", className: "space-y-2", children: answers.map((answer, i) => /* @__PURE__ */ jsx("p", { children: answer }, i)) })
}
)
] })
}
);
};
export {
FrequentlyAskedQuestions
};