import React from "react"; import { connect } from "react-redux"; import { Link } from "react-router-dom"; import Avatar from "../../../components/Avatar"; import moment from "jalali-moment"; export const Target = ({ blogs, isMobile }) => { const Large = ({ blog }) => { return isMobile ? ( <div className="flex flex-col w-full mb-10"> <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"> {!blog?.author.picFileId && <Avatar size={60} />} {blog?.author.picFileId && ( <img src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`} alt="author" className="w-20 rounded" /> )} <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("نوشته از:" + " " + `${blog?.author.name}`)} </strong> <p className="text-black text-sm text-opacity-75 mt-2 dark:text-gray-200"> {blog?.author.role} </p> </div> </div> <div className="flex flex-col i justify-center items-end"> <span className="lg:text-tiny text-gray1 lg:font-black"> {window.t("زمان مطالعه:") + " " + `${blog?.duration}` + " " + window.t("دقیقه")} </span> <span className="mt-3 lg:text-tiny text-gray1 lg:font-black"> {moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")} </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"> {!blog?.author.picFileId && <Avatar size={60} />} {blog?.author.picFileId && ( <img src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`} alt="author" className="w-20 rounded" /> )} <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("نوشته از:" + " " + `${blog?.author.name}`)} </strong> <p className="lg:text-sm lg:font-semibold text-white text-opacity-75 mt-2"> {blog?.author.role} </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> <div className="lg:w-4/5 text-gray70 lg:text-tiny text-tiny leading-5 lg:leading-6 dark:text-gray-200 text-justify" dangerouslySetInnerHTML={{ __html: blog?.text }} /> </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);