79 lines
3.2 KiB
JavaScript
79 lines
3.2 KiB
JavaScript
import { useState } from "react";
|
||
import Section from "@/components/Section";
|
||
import Heading from "@/components/Heading";
|
||
|
||
import { faq } from "@/mocks/faq";
|
||
|
||
type FaqProps = {};
|
||
|
||
const Faq = ({}: FaqProps) => {
|
||
const [activeId, setActiveId] = useState<string | null>(faq[0].id);
|
||
|
||
return (
|
||
<Section>
|
||
<div className="container lg:flex">
|
||
<Heading
|
||
className="lg:min-w-[22.75rem] lg:mr-12 lg:pt-8 xl:min-w-[32.75rem]"
|
||
textAlignClassName="md:text-center lg:text-left"
|
||
title="Frequently asked questions"
|
||
text={
|
||
<>
|
||
Haven’t found what you’re looking for?{" "}
|
||
<a
|
||
className="text-n-1 hover:text-color-2"
|
||
href="mailto:info@ui8.net"
|
||
>
|
||
Contact us
|
||
</a>
|
||
</>
|
||
}
|
||
/>
|
||
<div className="-mt-8 lg:mt-0">
|
||
{faq.map((item) => (
|
||
<div
|
||
className="py-8 border-b border-n-1/5"
|
||
key={item.id}
|
||
>
|
||
<div
|
||
className="flex items-start justify-between cursor-pointer"
|
||
onClick={() =>
|
||
setActiveId(
|
||
activeId === item.id ? null : item.id
|
||
)
|
||
}
|
||
>
|
||
<div className="text-[1.25rem] leading-8">
|
||
{item.title}
|
||
</div>
|
||
<div className="relative w-6 h-6 mt-1 ml-10">
|
||
<div className="absolute top-[0.6875rem] left-1 w-4 h-0.5 bg-n-1 rounded-sm"></div>
|
||
<div
|
||
className={`absolute top-[0.6875rem] left-1 w-4 h-0.5 bg-n-1 rounded-sm transition-transform ${
|
||
item.id === activeId
|
||
? ""
|
||
: "rotate-90"
|
||
}`}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={`grid grid-rows-[0fr] transition-all ${
|
||
item.id === activeId
|
||
? "grid-rows-[1fr]"
|
||
: ""
|
||
}`}
|
||
>
|
||
<div className="body-2 text-n-3 overflow-hidden">
|
||
<div className="pt-6">{item.text}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
);
|
||
};
|
||
|
||
export default Faq;
|