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.
 
 
 
 

65 lines
1.9 KiB

import React, {useEffect} from "react";
import Carousel from "react-elastic-carousel";
import Course from "./Course/index";
import { Link } from "react-router-dom";
import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
import {connect} from 'react-redux';
import "./index.scss";
function Courses({number, courses, selectedSort} : any) {
const slideNumberHandler = () => {
if (window.innerWidth >= 1440) {
return 5;
} else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
return 4;
} else if (window.innerWidth > 640 && window.innerWidth < 1008) {
return 3;
} else {
return 2;
}
};
return (
<section className="home-courses d-flex flex-column">
<header className="d-flex justify-content-between">
<div className="d-flex flex-column">
<h1>{selectedSort}</h1>
<span>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد.</span>
</div>
<Link to="/">
بیشتر
</Link>
</header>
{window.innerWidth > 1007 ? (
<Carousel
itemsToShow={slideNumberHandler()}
isRTL={true}
enableTilt={false}
showArrows={true}
pagination={false}
>
{courses?.map((item: Object, i: Number) => (
<Course data={item} key={i} />
))}
</Carousel>
) : (
<div className="home-courses__list d-flex">
{courses?.map((item: Object, i: Number) => (
<Course data={item} key={i} />
))}
</div>
)}
<Link
className="home-courses__more d-flex align-items-center"
to="/courses"
>
مشاهده بیشتر{" "}
<ExpandMoreRoundedIcon style={{ fontSize: 25, color: "#9CDF52" }} />
</Link>
</section>
);
}
export default connect((state : any) => ({
selectedSort : state.book.selectedSort,
}))(Courses)