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.
204 lines
6.4 KiB
204 lines
6.4 KiB
import React, { useEffect } from "react"; |
|
import { connect } from "react-redux"; |
|
import { blog, publicApi } from "../../redux/actions"; |
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
import { useParams } from "react-router-dom"; |
|
|
|
//components |
|
import Header from "../Blogs/layouts/Header"; |
|
import Suggest from "../Blogs/layouts/Suggest"; |
|
import New from "../Blogs/layouts/New"; |
|
import Avatar from "../../components/Avatar"; |
|
import moment from "jalali-moment"; |
|
|
|
//assets |
|
import arrow from "../../assets/icons/dropdown-blue.svg"; |
|
|
|
export const Blog = ({ |
|
getInfo, |
|
blog, |
|
setHeaderOptions, |
|
headerOptions, |
|
blogs, |
|
}) => { |
|
let { id } = useParams(); |
|
|
|
useEffect(() => { |
|
setHeaderOptions(headerOptions); |
|
}, []); |
|
|
|
useEffect(() => { |
|
getInfo({ id }); |
|
}, [id]); |
|
|
|
console.log(blog); |
|
|
|
return blogs?.length ? ( |
|
<div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-10 pb-24"> |
|
<div |
|
className="flex lg:hidden w-full rounded-md overflow-hidden relative" |
|
style={{ |
|
minHeight: 200, |
|
}} |
|
> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
alt="" |
|
className="w-full h-full absolute left-0 top-0" |
|
/> |
|
<div className="flex flex-col justify-end bg-gradient-to-t from-black absolute top-0 left-0 z-10 w-full h-full pb-2 px-2"> |
|
<div className="w-full flex justify-between"> |
|
<div className="flex items-center"> |
|
<Avatar |
|
rounded={"rounded-full"} |
|
source={ |
|
blog?.author?.picFileId |
|
? `https://dnvn.ir/api/v1/file/${blog?.author?.picFileId}` |
|
: null |
|
} |
|
size={60} |
|
/> |
|
|
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
<strong className="text-gray-300 text-tiny font-bold"> |
|
{window.t("نوشته از:") + " " + blog?.author?.name} |
|
</strong> |
|
<p className="text-gray-300 mt-2 text-xs"> |
|
{blog?.author.role} |
|
</p> |
|
</div> |
|
</div> |
|
<div className="flex flex-col justify-center items-end"> |
|
<span className="text-gray-300 text-sm"> |
|
{window.t("زمان مطالعه:") + |
|
" " + |
|
`${blog?.duration}` + |
|
" " + |
|
window.t("دقیقه")} |
|
</span> |
|
<span className="mt-2 text-gray-300 text-sm font-bold"> |
|
{moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")} |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div |
|
className="w-full hidden lg:flex" |
|
style={{ |
|
backgroundImage: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`, |
|
height: "calc(100vh / 2)", |
|
backgroundRepeat: "no-repeat", |
|
backgroundAttachment: "fixed", |
|
backgroundSize: "cover", |
|
backgroundPosition: "center bottom", |
|
}} |
|
></div> |
|
|
|
<div className="flex lg:my-5 gap-5 mt-5"> |
|
<strong className="flex-1 lg:text-5xl lg:font-black dark:text-gray-200"> |
|
{blog?.title} |
|
</strong> |
|
{/* desktop */} |
|
<div className="hidden lg:flex flex-col"> |
|
<div className="flex items-center"> |
|
<Avatar |
|
rounded={"rounded-full"} |
|
source={ |
|
blog?.author?.picFileId |
|
? `https://dnvn.ir/api/v1/file/${blog?.author?.picFileId}` |
|
: null |
|
} |
|
size={60} |
|
/> |
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
<strong className="lg:text-base lg:font-black text-gray1"> |
|
{window.t("نوشته از:") + " " + blog?.author?.name} |
|
</strong> |
|
<p className="lg:text-sm lg:font-semibold text-gray70 mt-4"> |
|
{blog?.author.role} |
|
</p> |
|
</div> |
|
</div> |
|
<div className="flex flex-col justify-center items-end"> |
|
<span className="lg:text-tiny text-gray1 lg:font-black"> |
|
{window.t("زمان مطالعه:") + |
|
" " + |
|
`${blog?.duration}` + |
|
" " + |
|
window.t("دقیقه")} |
|
</span> |
|
<span className="mt-2 lg:text-tiny text-gray1 lg:font-black"> |
|
{moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")} |
|
</span> |
|
</div> |
|
</div> |
|
{/* desktop */} |
|
</div> |
|
<div |
|
className="leading-8 lg:text-base text-sm dark:text-white" |
|
dangerouslySetInnerHTML={{ __html: blog?.text }} |
|
/> |
|
<Header title={window.t("پیشنهادی")} /> |
|
{/* mobile */} |
|
<div className="lg:hidden w-full flex overflow-x-scroll no-scrollbar gap-4"> |
|
{blogs.map((blog, index) => ( |
|
<New blog={blog} key={index} /> |
|
))} |
|
</div> |
|
{/* mobile */} |
|
{/* desktop */} |
|
<div className="hidden lg:flex w-full relative ltr"> |
|
<Carousel |
|
show={4} |
|
slide={2} |
|
swiping={true} |
|
useArrowKeys={true} |
|
key={id} |
|
transition={0.5} |
|
rightArrow={ |
|
<img |
|
className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0" |
|
src={arrow} |
|
alt="" |
|
// onClick={(e) => e.stopPropagation()} |
|
/> |
|
} |
|
leftArrow={ |
|
<img |
|
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3" |
|
src={arrow} |
|
alt="" |
|
// onClick={(e) => e.stopPropagation()} |
|
/> |
|
} |
|
> |
|
{blogs |
|
?.slice(0, 10) |
|
?.filter((blog) => Number(blog?.id) !== Number(id)) |
|
.map((blog, index) => ( |
|
<Suggest blog={blog} key={index} /> |
|
))} |
|
</Carousel> |
|
</div> |
|
{/* desktop */} |
|
</div> |
|
) : ( |
|
<div className="w-full h-screen"></div> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
isMobile: state.publicApi.isMobile, |
|
blog: state.blog.blog, |
|
blogs: state.blog.list, |
|
activeBlog: state.blog.active, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
getInfo: blog.info, |
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Blog);
|
|
|