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.
61 lines
2.3 KiB
61 lines
2.3 KiB
import React, { useEffect } from "react"; |
|
import Navbar from "../../components/Navbar/index"; |
|
import Footer from "../../views/Home/Footer/index"; |
|
import search 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 {publicApi} from '../../redux/actions'; |
|
import scroll from "../../util/scroll.js"; |
|
import "./index.scss"; |
|
|
|
function Faq({ list, setFaqActive }: any) { |
|
useEffect(() => { |
|
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="سوال خود را جستجو کنید" /> |
|
<button> |
|
<img src={search} alt="جستجو" /> |
|
</button> |
|
</div> |
|
</header> |
|
<ul className="faq__list d-flex flex-column"> |
|
{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 p-4" onClick={() => setFaqActive(item.id) }> |
|
<strong>{item.name}</strong> |
|
{item.active ? ( |
|
<img src={dropdown} alt="" /> |
|
) : ( |
|
<img src={whiteDropdown} alt="" /> |
|
)} |
|
</div> |
|
{item.active && ( |
|
<div className="faq__list--itemBody d-flex px-4"> |
|
<p>{item.value}</p> |
|
</div> |
|
)} |
|
</li> |
|
))} |
|
</ul> |
|
</main> |
|
<Footer /> |
|
</div> |
|
); |
|
} |
|
|
|
export default connect((state: any) => ({ |
|
list: state.publicApi.faqList, |
|
}), {setFaqActive : publicApi.setFaqActive,})(Faq);
|
|
|