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.
 
 
 

109 lines
3.3 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 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);