|
|
|
@ -1,20 +1,19 @@ |
|
|
|
|
import React, { useState } from "react"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
|
|
|
|
|
|
|
|
//components
|
|
|
|
|
import Video from "../../../../../components/JolPlayer"; |
|
|
|
|
import Book from "../../../Landscape/Page1/Book"; |
|
|
|
|
import Lights from "../../../Landscape/Page1/Lights"; |
|
|
|
|
import Video from "../../../../../components/JolPlayer"; |
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
import arrow from "../../../../../assets/icons/dropdown-blue.svg"; |
|
|
|
|
import olum1Image from "../../../../../assets/images/olum-1.svg"; |
|
|
|
|
import olum2Image from "../../../../../assets/images/olum-2.svg"; |
|
|
|
|
import olum4Image from "../../../../../assets/images/olum-4.svg"; |
|
|
|
|
import olum7Image from "../../../../../assets/images/olum-7.svg"; |
|
|
|
|
import zist11Image from "../../../../../assets/images/zist-11.svg"; |
|
|
|
|
import sheffImage from "../../../../../assets/images/sheff.svg"; |
|
|
|
|
import flatFlower from "../../../../../assets/icons/flat-flower-white.svg"; |
|
|
|
|
import jojoImage from "../../../../../assets/images/jojo.svg"; |
|
|
|
|
|
|
|
|
|
function Header({ list }) { |
|
|
|
|
function Header({ bookList }) { |
|
|
|
|
const [show, setShow] = useState(2); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
@ -32,11 +31,13 @@ function Header({ list }) { |
|
|
|
|
className="absolute transform left-1/2 top-0 -translate-x-1/2 opacity-30" |
|
|
|
|
/> |
|
|
|
|
<Lights degrees={[0, 0]} /> |
|
|
|
|
{bookList?.length ? ( |
|
|
|
|
<div className="w-full flex flex-col lg:px-8 relative"> |
|
|
|
|
<div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}> |
|
|
|
|
<div className="w-full relative z-10 px-4 ltr"> |
|
|
|
|
<Carousel |
|
|
|
|
show={show} |
|
|
|
|
slide={1} |
|
|
|
|
key={bookList?.length} |
|
|
|
|
swiping={true} |
|
|
|
|
swipeOn={0.05} |
|
|
|
|
// useArrowKeys={true}
|
|
|
|
@ -56,13 +57,15 @@ function Header({ list }) { |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{list.map((book, index) => ( |
|
|
|
|
{bookList?.map((book, index) => ( |
|
|
|
|
<Book book={book} key={index} /> |
|
|
|
|
))} |
|
|
|
|
</Carousel> |
|
|
|
|
</div> |
|
|
|
|
<img src={sheffImage} alt="" className="w-full absolute bottom-0" /> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
<div className="w-full flex justify-center mt-5"> |
|
|
|
|
<Link |
|
|
|
|
to="/products" |
|
|
|
@ -100,54 +103,15 @@ function Header({ list }) { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full p-4 transform translate-y-1/3 relative"> |
|
|
|
|
<img |
|
|
|
|
{/* <img |
|
|
|
|
src={jojoImage} |
|
|
|
|
alt="" |
|
|
|
|
className="w-full z-10 absolute top-0 left-0" |
|
|
|
|
/> |
|
|
|
|
<Video /> |
|
|
|
|
/> */} |
|
|
|
|
{/* <Video /> */} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default Header; |
|
|
|
|
|
|
|
|
|
Header.defaultProps = { |
|
|
|
|
list: [ |
|
|
|
|
{ |
|
|
|
|
name: window.t("زیست یازدهم"), |
|
|
|
|
|
|
|
|
|
imageUrl: zist11Image, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: window.t("علوم دوم"), |
|
|
|
|
|
|
|
|
|
imageUrl: olum2Image, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: window.t("علوم اول"), |
|
|
|
|
|
|
|
|
|
imageUrl: olum1Image, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: window.t("علوم هفتم"), |
|
|
|
|
|
|
|
|
|
imageUrl: olum7Image, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: window.t("علوم چهارم"), |
|
|
|
|
|
|
|
|
|
imageUrl: olum4Image, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: window.t("علوم چهارم"), |
|
|
|
|
|
|
|
|
|
imageUrl: olum4Image, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: window.t("علوم چهارم"), |
|
|
|
|
imageUrl: olum4Image, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|