From 914a6ee1eb650400340e47e0f7d169eba71743c4 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 27 Jun 2023 13:11:38 +0100
Subject: [PATCH] faq breadcrumb added, faq layout changed

---
 public/index.html                     |   3 -
 src/assets/css/main.css               |  68 +++++++++++++++++
 src/assets/images/arrow-down.png      | Bin 0 -> 11097 bytes
 src/components/FAQ/Index.js           |  14 +++-
 src/components/Service/FAQServices.js | 103 +++++++++++++++++++-------
 5 files changed, 155 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/images/arrow-down.png

diff --git a/public/index.html b/public/index.html
index 8dcd232..44c1f41 100755
--- a/public/index.html
+++ b/public/index.html
@@ -55,9 +55,6 @@
     <!--
       need jv8
     -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
   <script>var LHC_API = LHC_API||{};
     LHC_API.args = {mode:'widget',lhc_base_url:'//chat.live.wrenchboard.com/',wheight:450,wwidth:350,pheight:520,pwidth:500,leaveamessage:true,check_messages:false};
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index c74c47f..4c732b2 100755
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -8229,3 +8229,71 @@ blockquote cite {
 }
 
 /*# sourceMappingURL=style.css.map */
+
+/* CSS FOR FAQ ACCORDION DISPLAY */
+.accordion-con{
+  background-color: #f5f6f7;
+}
+
+.accordion-item{
+  position: relative;
+  overflow: hidden;
+  /* z-index: 1; */
+  border-radius: 5px;
+  box-shadow: 0px 0px 15px #ddd;
+  padding: 10px;
+  background-color: #fff;
+}
+.accordion-title-bar{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.accordion-title p {
+  font-weight: 600;
+}
+
+.accordion-title-icon{
+  position: absolute;
+  right: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.accordion-title-icon img{
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+}
+.horizontal{
+  transition: all .5s;
+  display: flex;
+  align-items: center;
+  background-color: skyblue;
+  color: #fff;
+  border-radius: 999px;
+  padding: 2px 3px;
+}
+.vertical{
+  transform: rotate(180deg);
+  background-color: #4687ba;
+}
+
+.accordion-body-hide{
+  position: relative;
+  height: 0;
+  visibility: hidden;
+  transition: all .5s;
+}
+.accordion-body-show{
+  position: relative;
+  /* height: 100px; */
+  visibility: visible;
+  transition: all .5s;
+  /* animation-name: slidedown;
+  animation-timing-function: linear;
+  animation-duration: .5s;
+  animation-fill-mode: forwards; */
+}
\ No newline at end of file
diff --git a/src/assets/images/arrow-down.png b/src/assets/images/arrow-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d4a15910f69acfdc80e08fec7e23a09ab47b65a
GIT binary patch
literal 11097
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
Y>m(0h`1liGWR?wK?O;`BaW(n>0cYCRU;qFB

literal 0
HcmV?d00001

diff --git a/src/components/FAQ/Index.js b/src/components/FAQ/Index.js
index afdb282..d03c2ce 100644
--- a/src/components/FAQ/Index.js
+++ b/src/components/FAQ/Index.js
@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import useToggle from '../../Hooks/useToggle';
 import Drawer from '../Mobile/Drawer';
-import HeaderService from '../Service/HeaderService';
-import HeroService from '../Service/HeroService';
 import FooterHomeOne from '../HomeOne/FooterHomeOne';
 import BackToTop from '../BackToTop';
 import StickyMenu from '../../lib/StickyMenu';
 import FAQService from '../Service/FAQServices';
+import HeroNews from '../News/HeroNews';
+import HeaderNews from '../News/HeaderNews';
 
 
 function FAQ() {
@@ -17,8 +17,14 @@ function FAQ() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderService action={drawerAction.toggle} />
-            <HeroService title="Frequently asked questions" />
+            <HeaderNews action={drawerAction.toggle} />
+            <HeroNews
+                title="Frequently asked questions"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/faq', title: 'Faq' },
+                ]}
+            />
             <FAQService />
             <FooterHomeOne />
             <BackToTop />
diff --git a/src/components/Service/FAQServices.js b/src/components/Service/FAQServices.js
index 8d5b7d4..8ae39da 100644
--- a/src/components/Service/FAQServices.js
+++ b/src/components/Service/FAQServices.js
@@ -1,16 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import thumb from '../../assets/images/service-page.jpg';
 import ServiceSideMenu from './ServiceSideMenu';
-import getConfig from './../../Config/config'
 import {Link} from 'react-router-dom'
 import FaqData from '../../Services/FaqData';
+import Arrow from '../../assets/images/arrow-down.png'
 
 function FAQService() {
+    const [isOpen, setOpen] = React.useState({type: 'faq0'});
+    const accordionHandler = (name) => {
+      setOpen(prev => {
+        if(prev.type == name){
+            return {type: ''}
+        }else {
+            return {type: name}
+        }
+      });
+    };
     let [faq, setFaq] = useState([])
 
     useEffect(()=>{
         FaqData().then(res => {
-            console.log(res)
             setFaq(res.data.result_list)
         }).catch(err => {
             console.log('You got an error ========> '+ err)
@@ -25,32 +33,37 @@ function FAQService() {
                         <div className="col-lg-4">
                             <ServiceSideMenu />
                         </div>
-                        <div className="col-lg-8">
-                            <div className="service-details-content">
+                        <div className="col-lg-8 accordion-wrapper">
+                            <div className="p-3 service-details-content accordion-con">
                                 <div className="container-fluid">
-                                    <h3>Frequently asked questions</h3>
+                                    <h3 className='p-3 text-center'>Frequently asked questions</h3>
                                 </div>
-                                <div class="accordion" id="accordionExample">
-                                    {faq.map((item, index)=>(
-                                        <div key={index} class="card">
-                                            <div class="card-header" id={`heading${index}`}>
-                                                <h2 class="mb-0">
-                                                    <button class="btn btn-block text-left" type="button" data-toggle="collapse" data-target={`#collapse${index}`} aria-expanded="true" aria-controls={`collapse${index}`}>
-                                                    {item.title}
-                                                    </button>
-                                                </h2>
-                                            </div>
-    
-                                            <div id={`collapse${index}`} class={`${index > 0 ? 'collapse' : 'collapse show'}`} aria-labelledby={`heading${index}`} data-parent="#accordionExample">
-                                            <div class="card-body">
-                                                {item.msg}
-                                            </div>
-                                            </div>
-                                        </div>
-                                    ))}
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
                                 </div>
                                 <div className='container-fluid text-center'>
-                                    <p className='my-2'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
+                                    <p className='my-4'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
                                 </div>
                             </div>
                         </div>
@@ -61,4 +74,42 @@ function FAQService() {
     );
 }
 
-export default FAQService;
\ No newline at end of file
+export default FAQService;
+
+export function Accordion({ datas, name, accordionHandler, isOpen }) {
+    // const [isOpen, setOpen] = React.useState(false);
+    // const accordionHandler = () => {
+    //   setOpen(!isOpen);
+    // };
+    return (
+      <>
+        <div className="accordion-item">
+          <div
+            className="accordion-title-bar container-fluid"
+            onClick={()=>{accordionHandler(name)}}
+          >
+            <div className="accordion-title">
+              <p className="">
+                {datas.title}
+              </p>
+            </div>
+            <div className="accordion-title-icon">
+              <span className={`horizontal ${isOpen.type == name ? 'vertical' : ''}`}>
+                <img className="" src={Arrow} />
+              </span>
+            </div>
+          </div>
+          <div className={`${isOpen.type == name ? "accordion-body-show" : "accordion-body-hide"}`}>
+            <div className="accordion-body-content" style={{display: 'flex', padding: '10px'}}>
+              <div className="rounded-[28px]" style={{width: '3px', backgroundColor: 'skyblue'}}></div>
+              <div className="flex-1">
+                <p className="" style={{padding: '0px 10px', letterSpacing:'.5px'}}>
+                  {datas.msg}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
\ No newline at end of file