first

src/pages/faq/FaqAccordion.tsx

@@ -0,0 +1,46 @@
+import SearchBox from 'components/common/SearchBox';
+import { faqBreadcrumbItems, faqs } from 'data/faq';
+import { Accordion } from 'react-bootstrap';
+import FaqCta from 'components/cta/FaqCta';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import PageBreadcrumb from 'components/common/PageBreadcrumb';
+
+const FaqAccordion = () => {
+  return (
+    <div>
+      <PageBreadcrumb items={faqBreadcrumbItems} />
+      <h2 className="mb-5">FAQ</h2>
+      <h5 className="mb-3">How can we help?</h5>
+      <p className="text-body-tertiary">
+        Search for the topic you need help with or{' '}
+        <Link to="#!">contact our support</Link>
+      </p>
+      <SearchBox
+        placeholder="Search"
+        className="w-100 mb-8"
+        style={{ maxWidth: '25rem' }}
+      />
+      <Accordion className="" defaultActiveKey="0">
+        {faqs.map((faq, index) => (
+          <Accordion.Item
+            className={classNames({
+              'border-top': index === 0
+            })}
+            eventKey={String(index)}
+            key={faq.id}
+          >
+            <Accordion.Header>{faq.title}</Accordion.Header>
+            <Accordion.Body
+              className="pt-0"
+              dangerouslySetInnerHTML={{ __html: faq.details }}
+            />
+          </Accordion.Item>
+        ))}
+      </Accordion>
+      <FaqCta />
+    </div>
+  );
+};
+
+export default FaqAccordion;

src/pages/faq/FaqTab.tsx

@@ -0,0 +1,97 @@
+import bg from 'assets/img/bg/bg-40.png';
+import bgDark from 'assets/img/bg/bg-dark-40.png';
+import { Link } from 'react-router-dom';
+import SearchBox from 'components/common/SearchBox';
+import { Col, Row, Tab } from 'react-bootstrap';
+import { useBreakpoints } from 'providers/BreakpointsProvider';
+import CategoryTab from 'components/modules/faq/CategoryTab';
+import SubCategoryTab from 'components/modules/faq/SubCategoryTab';
+import SubCategoryContent from 'components/modules/faq/SubCategoryContent';
+import FaqTabProvider, { useFaqTabContext } from 'providers/FaqTabProvider';
+import CategoryOffcanvas from 'components/modules/faq/CategoryOffcanvas';
+
+const index = () => {
+  return (
+    <FaqTabProvider>
+      <FaqTab />
+    </FaqTabProvider>
+  );
+};
+
+const FaqTab = () => {
+  const { breakpoints } = useBreakpoints();
+
+  const {
+    activeKey,
+    setActiveKey,
+    subCategoryActiveKey,
+    setSubCategoryActiveKey
+  } = useFaqTabContext();
+
+  return (
+    <div className="mb-9">
+      <div
+        className="mx-n4 mx-lg-n6 mt-n5 position-relative mb-md-9"
+        style={{ height: '208px' }}
+      >
+        <div
+          className="bg-holder d-dark-none"
+          style={{
+            backgroundImage: `url(${bg})`,
+            backgroundSize: 'cover'
+          }}
+        />
+        <div
+          className="bg-holder d-light-none"
+          style={{
+            backgroundImage: `url(${bgDark})`,
+            backgroundSize: 'cover'
+          }}
+        />
+        <div className="faq-title-box position-relative bg-body-emphasis border border-translucent p-6 rounded-3 text-center mx-auto">
+          <h1>How can we help?</h1>
+          <p className="my-3">
+            Search for the topic you need help with or
+            <Link to="mailto:support@themewagon.com"> contact our support</Link>
+          </p>
+          <SearchBox className="w-100" placeholder="" />
+        </div>
+      </div>
+      <Tab.Container
+        defaultActiveKey={activeKey}
+        onSelect={(key: string | null) => setActiveKey(key || '')}
+        activeKey={activeKey}
+      >
+        <Row className="gx-xl-8 gx-xxl-11">
+          {breakpoints.up('md') && <CategoryTab />}
+          <Col
+            md={6}
+            xl={7}
+            xxl={8}
+            className="empty-header d-none d-md-block"
+          />
+          <Col xs={12} className="m-0">
+            <Tab.Container
+              defaultActiveKey={subCategoryActiveKey}
+              onSelect={(key: string | null) =>
+                setSubCategoryActiveKey(key || '')
+              }
+              id="sub-category"
+              activeKey={subCategoryActiveKey}
+            >
+              <Row className="gx-xl-8 gx-xxl-11 gy-6">
+                {breakpoints.up('md') && <SubCategoryTab />}
+                <Col md={6} xl={7} xxl={8} className="mt-0">
+                  <SubCategoryContent />
+                </Col>
+              </Row>
+            </Tab.Container>
+            {breakpoints.down('md') && <CategoryOffcanvas />}
+          </Col>
+        </Row>
+      </Tab.Container>
+    </div>
+  );
+};
+
+export default index;