parent
6c29fc8ff6
commit
147114b444
24 changed files with 535 additions and 161 deletions
|
After Width: | Height: | Size: 382 B |
|
After Width: | Height: | Size: 541 B |
@ -1,20 +1,64 @@ |
||||
import React from "react"; |
||||
import React, { useState, useEffect } from "react"; |
||||
import "./index.scss"; |
||||
|
||||
import dropdown from "../../assets/icons/dropdown.png"; |
||||
|
||||
export default function GradeFilter(props: any) { |
||||
const [arrowTop, setArrowTop] = useState(false); |
||||
const { grades, grade, setGrade } = props; |
||||
|
||||
useEffect(() => { |
||||
setArrowTop(false); |
||||
},[grade]) |
||||
return ( |
||||
<section className="grade-filter d-flex align-items-center"> |
||||
<h1 className="d-flex align-items-center"> |
||||
پایه تحصیلی <span></span> |
||||
پایه تحصیلی |
||||
{window.innerWidth > 1007 ? <span></span> : null} |
||||
</h1> |
||||
<ul className="d-flex align-items-center"> |
||||
{grades.map((item: String, i: any) => ( |
||||
<li key={i} onClick={(e) => grade !== item ? setGrade(item) : setGrade(null)} className={grade === item ? "grade-filter__active" : ""}> |
||||
{item} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
<div |
||||
className="grade-filter__box d-flex" |
||||
onClick={() => setArrowTop(!arrowTop)} |
||||
> |
||||
{ |
||||
grade ? <h2>{grade}</h2> : <span>پایه تحصیلی خود را انتخاب نمائید</span> |
||||
} |
||||
<img |
||||
src={dropdown} |
||||
style={{ transform: !arrowTop ? "rotate(180deg)" : "rotate(0deg)" }} |
||||
/> |
||||
</div> |
||||
{arrowTop ? ( |
||||
<ul className="grade-filter__list d-flex flex-wrap"> |
||||
{grades.map((item: String, i: any) => ( |
||||
<li |
||||
key={i} |
||||
onClick={(e) => |
||||
grade !== item ? setGrade(item) : setGrade(null) |
||||
} |
||||
className={grade === item ? "grade-filter__list--active" : ""} |
||||
> |
||||
{item} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
) : null} |
||||
|
||||
{window.innerWidth > 1007 ? ( |
||||
<ul className="d-flex align-items-center"> |
||||
{grades.map((item: String, i: any) => ( |
||||
<li |
||||
key={i} |
||||
onClick={(e) => |
||||
grade !== item ? setGrade(item) : setGrade(null) |
||||
} |
||||
className={grade === item ? "grade-filter__active" : ""} |
||||
> |
||||
{item} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
) : null} |
||||
</section> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1 @@ |
||||
declare module '3d-react-carousal'; |
||||
@ -1,38 +1,46 @@ |
||||
import React from "react"; |
||||
import Carousel from "react-elastic-carousel"; |
||||
import React, { useState } from "react"; |
||||
import Carousell from "react-elastic-carousel"; |
||||
import {Carousel} from "3d-react-carousal"; |
||||
import Blog from "./Blog/index"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
export default function Blogs(props: any) { |
||||
const slideNumberHandler = () => { |
||||
if(window.innerWidth >= 1440){ |
||||
if (window.innerWidth >= 1440) { |
||||
return 3; |
||||
}else if(window.innerWidth >= 1008 && window.innerWidth < 1440){ |
||||
} else if (window.innerWidth >= 1008 && window.innerWidth < 1440) { |
||||
return 3; |
||||
}else if(window.innerWidth > 640 && window.innerWidth < 1008 ){ |
||||
} else if (window.innerWidth > 640 && window.innerWidth < 1008) { |
||||
return 2; |
||||
}else{ |
||||
} else { |
||||
return 1; |
||||
} |
||||
} |
||||
}; |
||||
const { number, blogs } = props; |
||||
return ( |
||||
<section className="home-books d-flex flex-column"> |
||||
<section className="home-blogs d-flex flex-column"> |
||||
<header className="d-flex flex-column"> |
||||
<h1>پیشنهادی برای شما</h1> |
||||
</header> |
||||
<Carousel |
||||
itemsToShow={slideNumberHandler()} |
||||
isRTL={true} |
||||
enableTilt={false} |
||||
showArrows={false} |
||||
pagination={false} |
||||
> |
||||
{blogs.map((item : Object, i : Number) => ( |
||||
<Blog data={item} key={i} /> |
||||
))} |
||||
</Carousel> |
||||
{window.innerWidth > 1007 ? ( |
||||
<Carousell |
||||
itemsToShow={slideNumberHandler()} |
||||
isRTL={true} |
||||
enableTilt={false} |
||||
showArrows={false} |
||||
pagination={false} |
||||
> |
||||
{blogs.map((item: Object, i: Number) => ( |
||||
<Blog data={item} key={i} /> |
||||
))} |
||||
</Carousell> |
||||
) : ( |
||||
<Carousel autoplay={false} arrows={false} slides={blogs.map((item: Object, i: Number) => ( |
||||
<Blog data={item} key={i} /> |
||||
))} /> |
||||
)} |
||||
</section> |
||||
); |
||||
} |
||||
|
||||
Loading…
Reference in new issue