update 5 files

master
Reza_ashrafi 2 years ago
parent 99647fb573
commit 552c12e29d
  1. 2
      src/components/Navbar/index.js
  2. 5
      src/views/Home/Landscape/Page1/Book/index.js
  3. 122
      src/views/Home/Portrait/Public/Header/index.js
  4. 13
      src/views/Home/Portrait/Public/index.js

@ -294,7 +294,7 @@ function Navbar({
{!user ? ( {!user ? (
<Link <Link
to="/signup" to="/signup"
className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm" className="hidden lg:flex bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
> >
{window.t("ورود یا ثبت نام")} {window.t("ورود یا ثبت نام")}
</Link> </Link>

@ -1,11 +1,10 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
// import _ from 'lodash';
export default function Book({ book }) { export default function Book({ book }) {
return ( return (
<Link to={`{/products/${book.name}}`} className="flex group relative cursor-pointer"> <Link to={`{/products/${book?.id}}`} className="flex group relative cursor-pointer px-4">
<img src={book.imageUrl} alt={book.name} className="lg:w-auto" /> <img src={"https://dnvn.ir/api/v1/file/" + book?.fileIds} alt={book.name} className="lg:w-auto" />
<button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm"> <button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm">
مشاهده و خرید مشاهده و خرید
</button> </button>

@ -1,20 +1,19 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Carousel } from "@trendyol-js/react-carousel"; import { Carousel } from "@trendyol-js/react-carousel";
//components
import Video from "../../../../../components/JolPlayer";
import Book from "../../../Landscape/Page1/Book"; import Book from "../../../Landscape/Page1/Book";
import Lights from "../../../Landscape/Page1/Lights"; import Lights from "../../../Landscape/Page1/Lights";
import Video from "../../../../../components/JolPlayer";
//assets
import arrow from "../../../../../assets/icons/dropdown-blue.svg"; 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 sheffImage from "../../../../../assets/images/sheff.svg";
import flatFlower from "../../../../../assets/icons/flat-flower-white.svg"; import flatFlower from "../../../../../assets/icons/flat-flower-white.svg";
import jojoImage from "../../../../../assets/images/jojo.svg"; import jojoImage from "../../../../../assets/images/jojo.svg";
function Header({ list }) { function Header({ bookList }) {
const [show, setShow] = useState(2); const [show, setShow] = useState(2);
return ( return (
@ -32,37 +31,41 @@ function Header({ list }) {
className="absolute transform left-1/2 top-0 -translate-x-1/2 opacity-30" className="absolute transform left-1/2 top-0 -translate-x-1/2 opacity-30"
/> />
<Lights degrees={[0, 0]} /> <Lights degrees={[0, 0]} />
<div className="w-full flex flex-col lg:px-8 relative"> {bookList?.length ? (
<div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}> <div className="w-full flex flex-col lg:px-8 relative">
<Carousel <div className="w-full relative z-10 px-4 ltr">
show={show} <Carousel
slide={1} show={show}
swiping={true} slide={1}
swipeOn={0.05} key={bookList?.length}
// useArrowKeys={true} swiping={true}
transition={0.5} swipeOn={0.05}
rightArrow={ // useArrowKeys={true}
<img transition={0.5}
className="w-5 absolute top-1/2 transform -translate-y-1/2 cursor-pointer -rotate-90" rightArrow={
src={arrow} <img
alt="" className="w-5 absolute top-1/2 transform -translate-y-1/2 cursor-pointer -rotate-90"
/> src={arrow}
} alt=""
leftArrow={ />
<img }
className="w-5 absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90" leftArrow={
src={arrow} <img
alt="" className="w-5 absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90"
/> src={arrow}
} alt=""
> />
{list.map((book, index) => ( }
<Book book={book} key={index} /> >
))} {bookList?.map((book, index) => (
</Carousel> <Book book={book} key={index} />
))}
</Carousel>
</div>
<img src={sheffImage} alt="" className="w-full absolute bottom-0" />
</div> </div>
<img src={sheffImage} alt="" className="w-full absolute bottom-0" /> ) : null}
</div>
<div className="w-full flex justify-center mt-5"> <div className="w-full flex justify-center mt-5">
<Link <Link
to="/products" to="/products"
@ -100,54 +103,15 @@ function Header({ list }) {
</div> </div>
</div> </div>
<div className="w-full p-4 transform translate-y-1/3 relative"> <div className="w-full p-4 transform translate-y-1/3 relative">
<img {/* <img
src={jojoImage} src={jojoImage}
alt="" alt=""
className="w-full z-10 absolute top-0 left-0" className="w-full z-10 absolute top-0 left-0"
/> /> */}
<Video /> {/* <Video /> */}
</div> </div>
</div> </div>
); );
} }
export default Header; 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,
},
],
};

@ -1,4 +1,7 @@
import React from 'react'; import React from 'react';
import {connect} from 'react-redux';
//components
import Header from './Header'; import Header from './Header';
import Features from './Features'; import Features from './Features';
import Responsive from './Responsive'; import Responsive from './Responsive';
@ -6,10 +9,10 @@ import Platforms from './Platforms';
import App from './App'; import App from './App';
import GradiantText from './GradiantText'; import GradiantText from './GradiantText';
function Public() { function Public({bookList}) {
return ( return (
<div className="w-full flex-1 px-4 pt-2 pb-24"> <div className="w-full flex-1 px-4 pt-2 pb-24">
<Header /> <Header bookList={bookList} />
<Features /> <Features />
<Responsive /> <Responsive />
<Platforms /> <Platforms />
@ -19,4 +22,8 @@ function Public() {
) )
} }
export default Public; const mapStateToProps = (state) => ({
bookList: state.book.list
})
export default connect(mapStateToProps)(Public);

Loading…
Cancel
Save