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