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.
60 lines
1.6 KiB
60 lines
1.6 KiB
import React, { useState, useEffect } from "react"; |
|
import Carousell from "react-elastic-carousel"; |
|
import { Carousel } from "3d-react-carousal"; |
|
import Blog from "./Blog/index"; |
|
import { connect, useSelector } from "react-redux"; |
|
import { blog } from "../../../redux/actions"; |
|
|
|
|
|
function Blogs(props: any) { |
|
const slideNumberHandler = () => { |
|
if (window.innerWidth >= 1440) { |
|
return 3; |
|
} else if (window.innerWidth >= 1008 && window.innerWidth < 1440) { |
|
return 3; |
|
} else if (window.innerWidth > 640 && window.innerWidth < 1008) { |
|
return 2; |
|
} else { |
|
return 1; |
|
} |
|
}; |
|
const list = useSelector((state: any) => state.blog.list); |
|
useEffect(() => { |
|
props.getList(); |
|
}, []); |
|
return ( |
|
<section className="home-blogs d-flex flex-column"> |
|
<header className="d-flex flex-column"> |
|
<h1>پیشنهادهای داغ برای شما</h1> |
|
</header> |
|
{window.innerWidth > 1007 ? ( |
|
<Carousell |
|
itemsToShow={slideNumberHandler()} |
|
isRTL={true} |
|
enableTilt={false} |
|
showArrows={false} |
|
pagination={false} |
|
> |
|
{list.map((item: Object, i: Number) => ( |
|
<Blog data={item} key={i} /> |
|
))} |
|
</Carousell> |
|
) : ( |
|
<Carousel |
|
autoplay={false} |
|
arrows={false} |
|
slides={list?.map((item: Object, i: Number) => ( |
|
<Blog data={item} key={i} /> |
|
))} |
|
/> |
|
)} |
|
</section> |
|
); |
|
} |
|
|
|
export default connect( |
|
({ blog }: any) => ({ |
|
blog, |
|
}), |
|
{ getList: blog.list } |
|
)(Blogs);
|
|
|