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.
 
 
 
 

116 lines
3.0 KiB

import React, { useState } from "react";
import { connect } from "react-redux";
import _ from "lodash";
import { book } from "../../redux/actions";
import search from "../../assets/icons/search.png";
import searchBlack from "../../assets/icons/searchBlack.svg";
import voice from "../../assets/icons/voice.png";
import voiceBlack from "../../assets/icons/voice-black.png";
function HomeSearchBox({
lastItems,
setVocal,
inputValue,
setInputValue,
sortFilter,
selectedSort,
theme,
}: any) {
const submitInput = (value: any) => {
setInputValue(value);
sortFilter({ search: value, sort: selectedSort });
};
const submitSort = (value: any) => {
sortFilter({ search: inputValue, sort: value });
};
const light = theme === "light";
return (
<section
className={_.join(
[
"home-search-box d-flex flex-column align-items-center",
theme === "light" ? "home-search-box-light" : "home-search-box-dark",
],
" "
)}
>
<form className="d-flex" onSubmit={(e) => e.preventDefault()}>
<input
type="search"
placeholder="نام درس یا دوره را جستجو کنید"
onChange={(e) => submitInput(e.target.value)}
value={inputValue}
/>
<button
type="submit"
onClick={() => sortFilter({ search: inputValue, sort: selectedSort })}
>
<img src={search} alt="" />
</button>
{light ? (
<img
className="mobile home-search-box__searchIcon"
src={searchBlack}
onClick={() =>
sortFilter({ search: inputValue, sort: selectedSort })
}
alt=""
/>
) : (
<img
className="mobile home-search-box__searchIcon"
src={search}
onClick={() =>
sortFilter({ search: inputValue, sort: selectedSort })
}
alt=""
/>
)}
<button
className="home-search-box__voice"
onClick={() => setVocal(true)}
>
{light ? <img src={voiceBlack} alt="" /> : <img src={voice} alt="" />}
</button>
</form>
<footer className="desktop align-items-center">
<strong>جدیدترینها</strong>
<ul className="d-flex">
{lastItems.map((item: any, i: any) => (
<li
key={i}
onClick={() =>
// sortFilter({ search: inputValue, sort: item.name })
setInputValue(item.name)
}
>
{item.name}
</li>
))}
</ul>
</footer>
</section>
);
}
export default connect(
(state: any) => ({
selectedSort: state.book.selectedSort,
theme: state.publicApi.theme,
}),
{ sortFilter: book.sortFilter }
)(HomeSearchBox);
HomeSearchBox.defaultProps = {
lastItems: [
{
name: "علوم",
},
{
name: "ریاضی",
},
],
};