Reza_ashrafi
3 years ago
parent
34cc930fb4
commit
adc8846aa3
15 changed files with 298 additions and 292 deletions
@ -1,84 +0,0 @@ |
||||
import React, {useState, useEffect} from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { book, publicApi } from "../../redux/actions"; |
||||
import ScrollContainer from "react-indiana-drag-scroll"; |
||||
import { Link } from "react-router-dom"; |
||||
import Product from "../Product"; |
||||
import './index.css'; |
||||
|
||||
const SalesContainer = ({ |
||||
list, getList, |
||||
grades |
||||
}) =>{ |
||||
const [filter, setFilter] = useState({ |
||||
search: "", |
||||
grade: "", |
||||
productsType: "کتاب", |
||||
}); |
||||
useEffect(() => { |
||||
getList(); |
||||
}, []); |
||||
return( |
||||
<div className="w-full my-10"> |
||||
<div className="w-full border-b-2 border-solid border-blue-300 mb-24" style={{height: '100px'}}> |
||||
<div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{ |
||||
marginBottom:'-5px', |
||||
height:'200px' |
||||
}} onClick={() => console.log(list)}> |
||||
|
||||
<div className="flex items-center "> |
||||
{/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */} |
||||
<h1 className="text-3xl leading-normal"> |
||||
|
||||
<h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3> |
||||
<h3 className="mr-4 w-24 text-center" style={{background: '#EFFF00'}}> کتاااابی </h3> |
||||
|
||||
</h1> |
||||
|
||||
</div> |
||||
<div className="flex items-center"> |
||||
<p className="text-md">بیش از ۵۰ کتاب تخفیف خورده</p> |
||||
<div className="w-6 h-6 bg-blue-300 mr-4 rounded-full"> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
<ScrollContainer className="flex overflow-x-scroll border-t-0 py-4 pl-10" style={{height:'550px'}} > |
||||
{ |
||||
list?.map((product, index) => ( |
||||
<Link to={"/products/" + product?.id}> |
||||
<Product |
||||
key={`prod_takhfif${index}`} |
||||
productsType={filter.productsType} |
||||
product={product} |
||||
index={Number(index)} |
||||
productName={`کتاب ${product?.name}`} |
||||
productCat={`پایه ${grades[product?.gradeId]}`} |
||||
productPrice={100000} |
||||
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
||||
numberOfRegards={160} |
||||
productTitleColor='text-blue5F' |
||||
productCatTextColor='text-blueC0' |
||||
productHolderBorder='' |
||||
productHolderHoverBorder='shadow-md' |
||||
big |
||||
starRate={Math.floor(Math.random() * 5) + 1} |
||||
discountPricePercent |
||||
hoverMode='blue' |
||||
/> |
||||
</Link> |
||||
))} |
||||
</ScrollContainer> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
list: state.book.list, |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
export default connect(mapStateToProps, { getList: book.list })(SalesContainer); |
||||
@ -1,88 +1,87 @@ |
||||
|
||||
import React, { useState, useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { book} from '../../../../redux/actions' |
||||
import { book } from "../../../../redux/actions"; |
||||
import { Carousel } from "@trendyol-js/react-carousel"; |
||||
import arrow from "../../../../assets/icons/slider-arrow.svg"; |
||||
import { Link } from "react-router-dom"; |
||||
import Product from '../../../../components/Product'; |
||||
import Product from "../../../../components/Product"; |
||||
import Button from "../../../../components/Button"; |
||||
import ScrollContainer from "react-indiana-drag-scroll"; |
||||
// import ScrollContainer from "react-indiana-drag-scroll";
|
||||
|
||||
const Part2 = ( |
||||
{ books, |
||||
getBooks, |
||||
grades} |
||||
) => { |
||||
console.log({books}) |
||||
const [filter, setFilter] = useState({ |
||||
search: "", |
||||
grade: "", |
||||
productsType: "کتاب", |
||||
}); |
||||
useEffect(() => { |
||||
getBooks(); |
||||
}, []); |
||||
return ( |
||||
<div className="w-full my-6" style={{ |
||||
height: '550px' |
||||
}}> |
||||
<div className="w-full flex justify-between items-center pr-10"> |
||||
<div className="flex items-center text-4xl font-black text-blue52"> |
||||
<div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> |
||||
<h1> |
||||
کتاب های جدید |
||||
</h1> |
||||
</div> |
||||
<div> |
||||
<Link to='/products'> |
||||
<Button |
||||
title="مشاهده لیست محصولات" |
||||
backgroundColor="bg-blue-100" |
||||
border={{ |
||||
color: "#196EC055", |
||||
width: "0px",
|
||||
}} |
||||
width="100%" |
||||
selectable={true} |
||||
|
||||
color= "text-blueC0" |
||||
onClick={() => null} |
||||
radius={false} |
||||
twPaddings="py-4 px-12 rounded" |
||||
/> |
||||
</Link> |
||||
</div> |
||||
</div> |
||||
<ScrollContainer className="flex overflow-x-scroll py-4 pl-10"> |
||||
{ |
||||
books?.slice(15,24).map((product, index) => ( |
||||
<Link to={"/products/" + product?.id}> |
||||
<Product |
||||
key={`prod_New${index}`} |
||||
productsType={filter.productsType} |
||||
product={product} |
||||
index={Number(index)} |
||||
productName={`کتاب ${product?.name}`} |
||||
productCat={`پایه ${grades[product?.gradeId]}`} |
||||
productPrice={100000} |
||||
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
||||
numberOfRegards={160} |
||||
productTitleColor='text-blue5F' |
||||
productCatTextColor='text-blueC0' |
||||
productHolderBorder='' |
||||
productHolderHoverBorder='shadow-md' |
||||
hoverMode='blue' |
||||
big |
||||
starRate={Math.floor(Math.random() * 5) + 1} |
||||
const Part2 = ({ books, grades }) => { |
||||
// console.log({ books });
|
||||
const [filter, setFilter] = useState({ |
||||
search: "", |
||||
grade: "", |
||||
productsType: "کتاب", |
||||
}); |
||||
return ( |
||||
<div |
||||
className="w-full my-6" |
||||
style={ |
||||
{ |
||||
// height: "550px",
|
||||
} |
||||
} |
||||
> |
||||
<div className="w-full flex justify-between items-center"> |
||||
<div className="flex items-center text-4xl font-black text-blue52"> |
||||
<div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> |
||||
<h1>کتاب های جدید</h1> |
||||
</div> |
||||
<div> |
||||
<Link to="/products"> |
||||
<Button |
||||
title="مشاهده لیست محصولات" |
||||
backgroundColor="bg-blue-100" |
||||
border={{ |
||||
color: "#196EC055", |
||||
width: "0px", |
||||
}} |
||||
width="100%" |
||||
selectable={true} |
||||
color="text-blueC0" |
||||
onClick={() => null} |
||||
radius={false} |
||||
twPaddings="py-4 px-12 rounded" |
||||
/> |
||||
</Link> |
||||
</div> |
||||
</div> |
||||
{books.length > 0 && ( |
||||
<div className="relative w-full" style={{ direction: "ltr" }}> |
||||
<Carousel |
||||
show={4.5} |
||||
slide={2} |
||||
swiping={true} |
||||
useArrowKeys={true} |
||||
transition={0.5} |
||||
rightArrow={ |
||||
<img |
||||
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-5" |
||||
src={arrow} |
||||
alt="" |
||||
/> |
||||
} |
||||
leftArrow={ |
||||
<img |
||||
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-5" |
||||
src={arrow} |
||||
alt="" |
||||
/> |
||||
</Link> |
||||
} |
||||
> |
||||
{books.map((product, index) => ( |
||||
<Product key={index} product={product} /> |
||||
))} |
||||
</ScrollContainer> |
||||
</Carousel> |
||||
</div> |
||||
) |
||||
} |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
books: state.book.list, |
||||
isDark: state.publicApi.isDark, |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
export default connect(mapStateToProps, { getBooks: book.list })(Part2); |
||||
export default connect(mapStateToProps, {})(Part2); |
||||
|
||||
@ -0,0 +1,78 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { book, publicApi } from "../../../../redux/actions"; |
||||
// import ScrollContainer from "react-indiana-drag-scroll";
|
||||
import { Carousel } from "@trendyol-js/react-carousel"; |
||||
import arrow from "../../../../assets/icons/slider-arrow.svg"; |
||||
import { Link } from "react-router-dom"; |
||||
import Product from "../../../../components/Product"; |
||||
import "./index.css"; |
||||
|
||||
const SalesContainer = ({ books }) => { |
||||
const [filter, setFilter] = useState({ |
||||
search: "", |
||||
grade: "", |
||||
productsType: "کتاب", |
||||
}); |
||||
return ( |
||||
<div className="w-full my-10"> |
||||
<div className="w-full py-10 pl-2 bg-white flex justify-between items-center gap-3"> |
||||
<div className="flex flex-row items-center pl-4"> |
||||
{/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */} |
||||
<div className="text-3xl leading-normal"> |
||||
<h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3> |
||||
<h3 |
||||
className="mr-4 text-center" |
||||
style={{ background: "#EFFF00" }} |
||||
> |
||||
{" "} |
||||
کتاااابی{" "} |
||||
</h3> |
||||
</div> |
||||
</div> |
||||
<div className="flex items-center"> |
||||
<p className="text-md flex">بیش از ۵۰ کتاب تخفیف خورده </p> |
||||
<div className="w-6 h-6 bg-blue-300 mr-4 rounded-full"></div> |
||||
</div> |
||||
|
||||
<span className="flex-1 h-0.5 bg-gray-200 mr-10"></span> |
||||
</div> |
||||
{books.length > 0 && ( |
||||
<div className="relative w-full" style={{ direction: "ltr" }}> |
||||
<Carousel |
||||
show={window.innerWidth / 350} |
||||
slide={2} |
||||
swiping={true} |
||||
useArrowKeys={true} |
||||
transition={0.5} |
||||
rightArrow={ |
||||
<img |
||||
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-5" |
||||
src={arrow} |
||||
alt="" |
||||
// onClick={(e) => e.stopPropagation()}
|
||||
/> |
||||
} |
||||
leftArrow={ |
||||
<img |
||||
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-5" |
||||
src={arrow} |
||||
alt="" |
||||
// onClick={(e) => e.stopPropagation()}
|
||||
/> |
||||
} |
||||
> |
||||
{books.map((product, index) => ( |
||||
<Product key={index} product={product} /> |
||||
))} |
||||
</Carousel> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
export default connect(mapStateToProps, { getList: book.list })(SalesContainer); |
||||
@ -1,92 +1,97 @@ |
||||
import React, { useState, useEffect, useCallback } from "react"; |
||||
import ScrollContainer from "react-indiana-drag-scroll"; |
||||
import { connect } from 'react-redux'; |
||||
import React, { useState, useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Link } from "react-router-dom"; |
||||
import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg'; |
||||
import filterIcon from "../../../assets/images/vuesax-linear-filter-tick.svg"; |
||||
import Banners from "../../../components/Banners"; |
||||
import SalesContainer from "../../../components/SalesContainer"; |
||||
import SalesContainer from "./SalesContainer"; |
||||
|
||||
import { book, publicApi } from "../../../redux/actions"; |
||||
import Part2 from "./Part2"; |
||||
import HomeImg from '../../../assets/images/HomeImg.png'; |
||||
import HomeImg from "../../../assets/images/HomeImg.png"; |
||||
import Part4 from "./Part4"; |
||||
import Design2D from "../../../components/Design2D"; |
||||
import { get } from "lodash"; |
||||
|
||||
const DesktopHome = ( |
||||
{ |
||||
books, |
||||
grades |
||||
} |
||||
|
||||
) =>{ |
||||
const banners = [ |
||||
{ |
||||
flex: 4, |
||||
items: [{ bg:'', |
||||
flex: 1, |
||||
image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg' |
||||
}], |
||||
}, |
||||
{ |
||||
flex: 2, |
||||
items: [ |
||||
{ bg:'', |
||||
flex: 1, |
||||
image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?' |
||||
}, |
||||
{ bg:'', |
||||
flex: 1, |
||||
image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg' |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
flex: 2, |
||||
items: [{ bg:'', |
||||
flex: 1, |
||||
image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/54d75e08cb0a72920ac3b2338232bf5ca70ccc74_1641638418.jpg' |
||||
}], |
||||
}, |
||||
] |
||||
|
||||
return ( |
||||
const DesktopHome = ({ grades, getList, books }) => { |
||||
const banners = [ |
||||
{ |
||||
flex: 4, |
||||
items: [ |
||||
{ |
||||
bg: "", |
||||
flex: 1, |
||||
image: |
||||
"https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
flex: 2, |
||||
items: [ |
||||
{ |
||||
bg: "", |
||||
flex: 1, |
||||
image: |
||||
"https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?", |
||||
}, |
||||
{ |
||||
bg: "", |
||||
flex: 1, |
||||
image: |
||||
"https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
flex: 2, |
||||
items: [ |
||||
{ |
||||
bg: "", |
||||
flex: 1, |
||||
image: |
||||
"https://dkstatics-public.digikala.com/digikala-adservice-banners/54d75e08cb0a72920ac3b2338232bf5ca70ccc74_1641638418.jpg", |
||||
}, |
||||
], |
||||
}, |
||||
]; |
||||
|
||||
useEffect(() => { |
||||
getList(); |
||||
},[]); |
||||
|
||||
return ( |
||||
<div className="flex flex-col items-center w-11/12 justify-center my-10"> |
||||
{/* <Banners |
||||
{/* <Banners |
||||
mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg' |
||||
midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?' |
||||
leftBanner= |
||||
midTopBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg' |
||||
/> */} |
||||
<div className="w-full"> |
||||
<div className="w-full"> |
||||
<Design2D array={banners} /> |
||||
</div> |
||||
<SalesContainer books={books} grades={grades}/> |
||||
<Part2 grades={grades}/> |
||||
<div className="mb-16"> |
||||
<img src={HomeImg} /> |
||||
</div> |
||||
<Part4 /> |
||||
</div> |
||||
</div> |
||||
<SalesContainer books={books} /> |
||||
<Part2 grades={grades} books={books} /> |
||||
<div className="mb-16"> |
||||
<img src={HomeImg} /> |
||||
</div> |
||||
<Part4 /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
) |
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
isMobile: state.publicApi.isMobile, |
||||
books: state.book.list, |
||||
gradeFilterBooks: state.book.gradeFilterBooks, |
||||
selectedGrade: state.book.selectedGrade, |
||||
}); |
||||
|
||||
} |
||||
const mapDispatchToProps = { |
||||
getList: book.list, |
||||
gradeFilter: book.gradeFilter, |
||||
setHeaderOptions: publicApi.setHeaderOptions, |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
isMobile: state.publicApi.isMobile, |
||||
books: state.book.list, |
||||
grades: state.publicApi.grades, |
||||
gradeFilterBooks: state.book.gradeFilterBooks, |
||||
selectedGrade: state.book.selectedGrade, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
getList: book.list, |
||||
gradeFilter: book.gradeFilter, |
||||
setHeaderOptions: publicApi.setHeaderOptions, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DesktopHome); |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DesktopHome); |
||||
|
||||
Loading…
Reference in new issue