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

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