|
|
import React from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import Avatar from "../../../components/Avatar"; |
|
|
|
|
|
export const Target = ({ blogs, isMobile }) => { |
|
|
const Large = ({ blog }) => { |
|
|
return isMobile ? ( |
|
|
<div className="flex flex-col w-full"> |
|
|
<div |
|
|
className="relative w-full rounded-md overflow-hidden" |
|
|
style={{ height: "calc(100vh / 4.5)" }} |
|
|
> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
|
alt="" |
|
|
className="w-full h-full absolute left-0 top-0" |
|
|
/> |
|
|
<div className="w-full h-full absolute left-0 top-0 bg-gradient-to-t from-black z-10"></div> |
|
|
</div> |
|
|
<strong className="font-bold my-3 leading-7 text-black dark:text-gray-200"> |
|
|
{blog?.title} |
|
|
</strong> |
|
|
<div className="w-full flex justify-between"> |
|
|
<div className="flex"> |
|
|
<Avatar size={45} /> |
|
|
<div className="flex flex-col py-1 mr-1 justify-center"> |
|
|
<strong className="text-opacity-75 text-tiny text-black dark:text-gray-200"> |
|
|
{window.t("نوشته از:" + " " + "کامران ایزدی")} |
|
|
</strong> |
|
|
<p className="text-black text-sm text-opacity-75 mt-2 dark:text-gray-200"> |
|
|
{window.t("سردبیر بخش وبلاگ دانوین")} |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div className="flex flex-col i justify-center items-end"> |
|
|
<span className="text-gray1 text-sm dark:text-gray-200"> |
|
|
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")} |
|
|
</span> |
|
|
<span className="mt-2 text-gray1 text-sm dark:text-gray-200"> |
|
|
{window.t("1400/11/24")} |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
) : ( |
|
|
<Link |
|
|
to={"/blogs/" + blog?.id} |
|
|
className="lg:w-1/2 relative rounded-md overflow-hidden" |
|
|
style={{ height: "calc(100vw / 12 * 11 / 2 * 9 / 14)" }} |
|
|
> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
|
alt="" |
|
|
className="w-full h-full absolute left-0 top-0" |
|
|
/> |
|
|
<div className="w-full h-full from-black z-10 absolute left-0 top-0 bg-gradient-to-t flex flex-col justify-end pb-5 px-5"> |
|
|
<strong className="lg:text-3xl bold mb-7 leading-7 text-white"> |
|
|
{blog?.title} |
|
|
</strong> |
|
|
<div className="w-full flex justify-between"> |
|
|
<div className="flex"> |
|
|
<Avatar size={60} /> |
|
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
|
<strong className="lg:text-tiny lg:font-black text-opacity-75 text-white"> |
|
|
{window.t("نوشته از:" + " " + "کامران ایزدی")} |
|
|
</strong> |
|
|
<p className="lg:text-sm lg:font-semibold text-white text-opacity-75 mt-2"> |
|
|
{window.t("سردبیر بخش وبلاگ دانوین")} |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</Link> |
|
|
); |
|
|
}; |
|
|
|
|
|
const Small = ({ blogs }) => { |
|
|
return ( |
|
|
<div className="w-full lg:w-1/2 flex flex-wrap lg:flex-col justify-between"> |
|
|
{blogs.map((blog, index) => ( |
|
|
<Link |
|
|
to={"/blogs/" + blog.id} |
|
|
key={index} |
|
|
className="lg:mb-0 mb-3 flex flex-col lg:flex-row lg:gap-2" |
|
|
style={{ width: isMobile ? "48%" : "100%" }} |
|
|
> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
|
alt="" |
|
|
style={{ |
|
|
height: isMobile |
|
|
? "calc(100vh / 8)" |
|
|
: "calc(100vw / 12 * 11 / 2 * 9 / 14 / 3.4)", |
|
|
width: isMobile |
|
|
? "100%" |
|
|
: "calc(100vw / 12 * 11 / 2 * 9 / 14 / 3 * 16 / 10)", |
|
|
}} |
|
|
className="rounded-md" |
|
|
/> |
|
|
<div className="flex flex-col justify-center lg:gap-4"> |
|
|
<strong className="lg:font-bold lg:text-lg text-tiny my-2 leading-5 dark:text-gray-200"> |
|
|
{blog?.title} |
|
|
</strong> |
|
|
<p className="lg:w-4/5 text-gray70 lg:text-tiny text-tiny leading-5 lg:leading-6 dark:text-gray-200"> |
|
|
{window.t( |
|
|
"هر نفسی که فرو می بریم، مرگی را که مدام به ما دست اندازی میکند پس میزند در نهایت این مرگ" |
|
|
)} |
|
|
</p> |
|
|
</div> |
|
|
</Link> |
|
|
))} |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
return ( |
|
|
<div className="flex flex-col lg:flex-row lg:gap-10"> |
|
|
<Large blog={blogs[0]} /> |
|
|
<Small blogs={blogs?.slice(0, 3)} /> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isMobile: state.publicApi.isMobile, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = {}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Target);
|
|
|
|