You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
3.4 KiB
103 lines
3.4 KiB
import React, { useEffect } from "react"; |
|
import Navbar from "../../components/Navbar"; |
|
import Footer from "../Home/Footer"; |
|
import searchIcon from "../../assets/icons/search.png"; |
|
import dropdown from "../../assets/icons/dropdown.png"; |
|
import whiteDropdown from "../../assets/icons/white-dropdown.png"; |
|
import { connect } from "react-redux"; |
|
import { faq } from "../../redux/actions"; |
|
import scroll from "../../util/scroll.js"; |
|
import "./index.scss"; |
|
|
|
function Faq({ |
|
list, |
|
selectFaq, |
|
getList, |
|
searchFaq, |
|
searchResult, |
|
search, |
|
}: any) { |
|
useEffect(() => { |
|
getList(); |
|
scroll.goToTop(); |
|
}, []); |
|
return ( |
|
<div className="faq main d-flex flex-column"> |
|
<Navbar /> |
|
<main className="d-flex flex-column"> |
|
<header className="d-flex flex-column"> |
|
<h1>پرسش های متداول</h1> |
|
<p> |
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
|
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در |
|
ستون و سطرآنچنان که لازم است و برای شرایط{" "} |
|
</p> |
|
<div className="d-flex"> |
|
<input |
|
type="search" |
|
placeholder="سوال خود را جستجو کنید" |
|
onChange={(e) => searchFaq(e.target.value)} |
|
/> |
|
<button> |
|
<img src={searchIcon} alt="جستجو" /> |
|
</button> |
|
</div> |
|
</header> |
|
<ul className="faq__list d-flex flex-column"> |
|
{!search && |
|
list?.map((item: any, i: any) => ( |
|
<li className="d-flex flex-column" key={i}> |
|
<div |
|
className="faq__list--itemHeader d-flex align-items-center justify-content-between" |
|
onClick={() => selectFaq(item.id)} |
|
> |
|
<strong>{item.title}</strong> |
|
{item.active ? ( |
|
<img src={dropdown} alt="" /> |
|
) : ( |
|
<img src={whiteDropdown} alt="" /> |
|
)} |
|
</div> |
|
{item.active && ( |
|
<div className="faq__list--itemBody d-flex"> |
|
<p>{item.description}</p> |
|
</div> |
|
)} |
|
</li> |
|
))} |
|
{search && |
|
searchResult?.map((item: any, i: any) => ( |
|
<li className="d-flex flex-column" key={i}> |
|
<div |
|
className="faq__list--itemHeader d-flex align-items-center justify-content-between" |
|
onClick={() => selectFaq(item.id)} |
|
> |
|
<strong>{item.title}</strong> |
|
{item.active ? ( |
|
<img src={dropdown} alt="" /> |
|
) : ( |
|
<img src={whiteDropdown} alt="" /> |
|
)} |
|
</div> |
|
{item.active && ( |
|
<div className="faq__list--itemBody d-flex"> |
|
<p>{item.description}</p> |
|
</div> |
|
)} |
|
</li> |
|
))} |
|
</ul> |
|
</main> |
|
<Footer /> |
|
</div> |
|
); |
|
} |
|
|
|
export default connect( |
|
(state: any) => ({ |
|
list: state.faq.list, |
|
searchResult: state.faq.searchResult, |
|
search: state.faq.search, |
|
}), |
|
{ getList: faq.list, selectFaq: faq.selectFaq, searchFaq: faq.searchFaq } |
|
)(Faq);
|
|
|