Reza_ashrafi
3 years ago
parent
669c4732b2
commit
fc6d4c4132
18 changed files with 326 additions and 74 deletions
|
After Width: | Height: | Size: 731 B |
@ -0,0 +1,49 @@ |
||||
import React from "react"; |
||||
import _ from "lodash"; |
||||
|
||||
const langDetector = (lang = "fa", option1, option2) => { |
||||
return lang === "fa" ? option1 : option2; |
||||
}; |
||||
|
||||
export default function Search({ |
||||
lang, |
||||
backgroundColor, |
||||
borderColor, |
||||
textColor, |
||||
icon, |
||||
}) { |
||||
return ( |
||||
<div |
||||
className={`flex items-center justify-center border-solid w-full border rounded-md overflow-hidden my-2 ${backgroundColor} ${borderColor}`} |
||||
> |
||||
<div className="relative text-gray-600 w-full bg-transparent"> |
||||
<span |
||||
className={_.join( |
||||
[ |
||||
"absolute inset-y-0 flex items-center pl-2", |
||||
langDetector(lang, "left-0", "right-0"), |
||||
], |
||||
" " |
||||
)} |
||||
> |
||||
<button |
||||
type="submit" |
||||
className="p-1 focus:outline-none focus:shadow-outline" |
||||
> |
||||
{icon && <img src={icon} className="w-6 h-6" alt="" />} |
||||
</button> |
||||
</span> |
||||
<input |
||||
type="search" |
||||
name="q" |
||||
className={`w-full py-3 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`} |
||||
placeholder={_.join( |
||||
[langDetector(lang, "جستجو...", "Search...")], |
||||
" " |
||||
)} |
||||
autoComplete="off" |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,45 @@ |
||||
import React from "react"; |
||||
|
||||
function Select({ |
||||
options, |
||||
icon, |
||||
fill, |
||||
hoverFill, |
||||
margin, |
||||
borderColor, |
||||
backgroundColor, |
||||
onChane, |
||||
name, |
||||
}) { |
||||
return ( |
||||
<div |
||||
className={`inline-block relative w-1/2 group ${margin} ${backgroundColor}`} |
||||
> |
||||
<select |
||||
className={`text-gray70 text-xs block appearance-none bg-transparent w-full border border-solid px-4 py-3 pr-3 rounded-md leading-tight focus:outline-none focus:border-blueC0 focus:text-blueC0 ${borderColor}`} |
||||
onChane={(e) => onChane(name, e.target.value)} |
||||
> |
||||
{options.map((option, index) => ( |
||||
<option key={index} className=""> |
||||
{option} |
||||
</option> |
||||
))} |
||||
</select> |
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2"> |
||||
<svg |
||||
className={`${fill} h-5 w-5 group-focus:${hoverFill}`} |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="0 0 20 20" |
||||
> |
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Select; |
||||
|
||||
Select.defaultProps = { |
||||
options: ["Really", "Option 2", "Option 3"], |
||||
}; |
||||
@ -0,0 +1,112 @@ |
||||
import React, { useState, useEffect, useCallback } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import { connect } from "react-redux"; |
||||
import Search from "../../components/Search"; |
||||
import Select from "../../components/Select"; |
||||
import { book } from "../../redux/actions"; |
||||
|
||||
//assets
|
||||
import searchLight from "../../assets/icons/search-light.svg"; |
||||
|
||||
const Product = ({ productsType, product, index, grades }) => { |
||||
return ( |
||||
<> |
||||
{productsType === "book" && ( |
||||
<Link |
||||
to={"/products" + product?.name} |
||||
className={`w-1/2 flex flex-col border-t border-grayDB dark:border-gray45 p-3 border-solid ${ |
||||
index % 2 === 0 ? "border-l" : "" |
||||
}`}
|
||||
> |
||||
<img |
||||
src={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
||||
className="w-full rounded-md mb-2" |
||||
/> |
||||
<strong className="text-blue5F dark:text-white text-md font-bold mb-1"> |
||||
{product?.name} |
||||
</strong> |
||||
<span className="text-xs text-blueC0 dark:text-white font-light mb-4"> |
||||
{"پایه" + " " + grades[product?.gradeId]} |
||||
</span> |
||||
<div className="w-full flex flex-row justify-center font-semibold text-md text-blue5F dark:text-white"> |
||||
{1399 + " " + "تومان"} |
||||
</div> |
||||
</Link> |
||||
)} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export const Products = ({ isDark, books, getList, grades }) => { |
||||
const [filter, setFilter] = useState({ |
||||
search: "", |
||||
grade: "", |
||||
productsType: "book", |
||||
}); |
||||
|
||||
const onChange = (name, value) => { |
||||
setFilter({ ...filter, [name]: value }); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
getList(); |
||||
}, []); |
||||
return ( |
||||
<> |
||||
{/* Portrait */} |
||||
<div className="w-full flex flex-col bg-transparent pt-20"> |
||||
<header className="w-full px-4"> |
||||
<Search |
||||
backgroundColor="bg-grayF9 dark:bg-gray36" |
||||
borderColor="border-grayDB dark:border-gray45" |
||||
textColor="text-blueC0 dark:text-white" |
||||
icon={searchLight} |
||||
/> |
||||
<div className="w-full flex flex-row justify-between mt-3"> |
||||
<Select |
||||
margin="ml-1" |
||||
fill="fill-blueC0 dark:fill-white" |
||||
borderColor="border-grayDB dark:border-gray45" |
||||
backgroundColor="bg-grayF9 dark:bg-gray36" |
||||
onChange={onChange} |
||||
name="productsType" |
||||
options={["کتاب", "ویديو", "اشتراک"]} |
||||
// hoverFill="fill-greenBA"
|
||||
/> |
||||
<Select |
||||
margin="mr-1" |
||||
fill="fill-blueC0 dark:fill-white" |
||||
borderColor="border-grayDB dark:border-gray45" |
||||
backgroundColor="bg-grayF9 dark:bg-gray36" |
||||
onChange={onChange} |
||||
name="grade" |
||||
options={Object.values(grades)} |
||||
// hoverFill="fill-grayBA"
|
||||
/> |
||||
</div> |
||||
</header> |
||||
<div className="w-full flex flex-row flex-wrap mt-3"> |
||||
{books?.map((product, index) => ( |
||||
<Product |
||||
key={index} |
||||
productsType={filter.productsType} |
||||
product={product} |
||||
index={Number(index)} |
||||
grades={grades} |
||||
/> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
books: state.book.list, |
||||
grades: state.publicApi.grades, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { getList: book.list }; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Products); |
||||
Loading…
Reference in new issue