|
|
import React, { useEffect } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import { blog, publicApi } from "../../redux/actions"; |
|
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
|
|
|
|
import Hashtags from "./layouts/Hashtags"; |
|
|
import Single from "./layouts/Single"; |
|
|
import Join from "./layouts/Join"; |
|
|
import New from "./layouts/New"; |
|
|
import Header from "./layouts/Header"; |
|
|
import Suggest from "./layouts/Suggest"; |
|
|
import Target from "./layouts/Target"; |
|
|
|
|
|
//assets |
|
|
import arrow from "../../assets/icons/dropdown-blue.svg"; |
|
|
|
|
|
export const Blogs = ({ isMobile, getList, blogs, setHeaderOptions }) => { |
|
|
useEffect(() => { |
|
|
setHeaderOptions({ shown: true }); |
|
|
if (blogs.length === 0) { |
|
|
getList(); |
|
|
} |
|
|
}, []); |
|
|
return ( |
|
|
<div className="flex flex-col lg:w-11/12 mx-auto lg:py-24"> |
|
|
<Hashtags /> |
|
|
<Single /> |
|
|
<Header title={"تازهترینها از وبلاگ"} /> |
|
|
<div className="w-full relative" style={{ direction: "ltr" }}> |
|
|
{blogs.length > 0 && ( |
|
|
<Carousel |
|
|
show={3} |
|
|
slide={2} |
|
|
swiping={true} |
|
|
useArrowKeys={true} |
|
|
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.map((blog, index) => ( |
|
|
<New blog={blog} key={index} /> |
|
|
))} |
|
|
</Carousel> |
|
|
)} |
|
|
</div> |
|
|
<Header title={"پیشنهاد سردبیر"} /> |
|
|
<div className="w-full relative" style={{ direction: "ltr" }}> |
|
|
{blogs.length > 0 && ( |
|
|
<Carousel |
|
|
show={4} |
|
|
slide={2} |
|
|
swiping={true} |
|
|
useArrowKeys={true} |
|
|
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.map((blog, index) => ( |
|
|
<Suggest blog={blog} key={index} /> |
|
|
))} |
|
|
</Carousel> |
|
|
)} |
|
|
</div> |
|
|
<Header title={"از دنیای آموزش"} /> |
|
|
<Target blogs={blogs?.slice(0,4)} /> |
|
|
<Join /> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isMobile: state.publicApi.isMobile, |
|
|
blogs: state.blog.list, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = { |
|
|
getList: blog.list, |
|
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Blogs);
|
|
|
|