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.
 
 
 

89 lines
2.9 KiB

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