WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

faq breadcrumb added, faq layout changed

Browse Source
This commit was merged in pull request #8.
This commit is contained in:
victorAnumudu
2023-06-27 13:11:38 +01:00
parent f83ddcba82
commit 914a6ee1eb
5 changed files with 155 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FAQ/Index.js
+10 -4
View File
@@ -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 />
src/components/Service/FAQServices.js
+77 -26
View File
@@ -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;
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>
</>
);
}