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

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);