|
|
import React from "react"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import { connect } from "react-redux"; |
|
|
import _ from "lodash"; |
|
|
import arrowGreenIcon from "../../../../../assets/icons/dropdown-blue.svg"; |
|
|
import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg"; |
|
|
|
|
|
function Blogs({ list, isDark }) { |
|
|
return ( |
|
|
<div className="w-full pr-4"> |
|
|
<div className="w-full flex flex-col rounded-md py-4 overflow-hidden"> |
|
|
<header className="w-full flex flex-row justify-between items-center"> |
|
|
<strong className="text-green7B dark:text-white font-bold text-base lg:text-sm"> |
|
|
خواندنیها |
|
|
</strong> |
|
|
{isDark ? ( |
|
|
<img |
|
|
src={ arrowWhiteIcon} |
|
|
alt="" |
|
|
className={`transform ml-4 w-7`} |
|
|
/> |
|
|
) : ( |
|
|
<img |
|
|
src={arrowGreenIcon} |
|
|
alt="" |
|
|
className={`transform ml-4 rotate-90`} |
|
|
/> |
|
|
)} |
|
|
</header> |
|
|
<ul className="list-none w-full overflow-x-scroll pt-3 flex flex-row pb-16 no-scrollbar"> |
|
|
{list.map((blog, index) => ( |
|
|
<Blog blog={blog} key={index} /> |
|
|
))} |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
const Blog = ({ blog }) => { |
|
|
return ( |
|
|
<li className="flex flex-col ml-3"> |
|
|
<Link |
|
|
to={"/blogs/" + blog.name} |
|
|
className="flex flex-row justify-center items-end rounded-md" |
|
|
style={{ |
|
|
background: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`, |
|
|
backgroundPosition: "contain", |
|
|
backgroundSize: "100% 100%", |
|
|
minWidth: 200, |
|
|
width: 'calc(100vw / 1.6)', |
|
|
maxWidth: 350, |
|
|
minHeight : 160, |
|
|
height : 'calc(100vw / 1.6 * 3 / 4)', |
|
|
maxHeight : 300 |
|
|
}} |
|
|
> |
|
|
<div className="w-11/12 bg-white rounded-md shadow-md flex flex-col transform translate-y-1/2 p-2 dark:bg-gray36"> |
|
|
<h2 className="text-xs font-semibold text-blue5F dark:text-white leading-5"> |
|
|
{blog.title} |
|
|
</h2> |
|
|
<div className="w-full flex flex-row justify-between items-center mt-3"> |
|
|
<div className="flex flex-row items-center"> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
|
alt="" |
|
|
className="w-5 h-5 rounded-full ml-2" |
|
|
/> |
|
|
<span className="text-green7B text-xs font-light dark:text-greenBA"> |
|
|
{"حامد دژبانی نسب"} |
|
|
</span> |
|
|
</div> |
|
|
<div className="flex flex-row items-center"> |
|
|
<span className="text-xs font-light text-gray70 dark:text-greenBA"> |
|
|
{_.join(["زمان مناسب", "30"], " ")} |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</Link> |
|
|
</li> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isDark: state.publicApi.isDark, |
|
|
}); |
|
|
|
|
|
export default connect(mapStateToProps, {})(Blogs);
|
|
|
|