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

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