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.
 
 
 

131 lines
4.9 KiB

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