Reza_ashrafi
3 years ago
commit
828301e428
25 changed files with 768 additions and 42 deletions
@ -0,0 +1,60 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const Banners = ({ |
||||||
|
mainBanner, |
||||||
|
leftBanner, |
||||||
|
midTopBanner, |
||||||
|
midBottomBanner, |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<div className="flex w-full justify-between" style={{ |
||||||
|
height: '400px' |
||||||
|
}}> |
||||||
|
<div className={`h-full w-1/2 rounded-xl flex items-center`} style={{ |
||||||
|
background: mainBanner ? '' : 'rgba(134,160,185,0.16)', |
||||||
|
|
||||||
|
}}> |
||||||
|
|
||||||
|
<img src={mainBanner} className="rounded-xl h-full" /> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="flex h-full w-1/2 "> |
||||||
|
<div className="flex flex-col w-1/2 h-full px-6 justify-center items-between"> |
||||||
|
|
||||||
|
<div className={`${midTopBanner ? '' : 'h-1/2 '} w-full rounded-xl mb-2`} |
||||||
|
style={{ |
||||||
|
background: midTopBanner ? '' : 'rgba(134,160,185,0.16)', |
||||||
|
|
||||||
|
}} |
||||||
|
> |
||||||
|
|
||||||
|
<img src={midTopBanner} className="rounded-xl" /> |
||||||
|
</div> |
||||||
|
<div className={`${midBottomBanner ? '' : 'h-1/2 '} w-full rounded-xl mt-2`} |
||||||
|
style={{ |
||||||
|
background: midBottomBanner ? '' : 'rgba(134,160,185,0.16)', |
||||||
|
|
||||||
|
}} |
||||||
|
> |
||||||
|
|
||||||
|
<img src={midBottomBanner} className="rounded-xl" /> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className=" h-full w-1/2 rounded-xl" |
||||||
|
style={{ |
||||||
|
background: leftBanner ? '' : 'rgba(134,160,185,0.16)', |
||||||
|
|
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={leftBanner} className="rounded-xl" /> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export default Banners; |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
.hasScrollbar::-webkit-scrollbar { |
||||||
|
width:5px; |
||||||
|
background-color: rgba(0,0,0,0.08); |
||||||
|
border-radius: 5px; |
||||||
|
|
||||||
|
margin-top: 200px; |
||||||
|
} |
||||||
|
|
||||||
|
.hasScrollbar::-webkit-scrollbar-thumb{ |
||||||
|
background:#196EC0; |
||||||
|
border-radius: 10px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
.hasScrollbar::-webkit-scrollbar-track { |
||||||
|
background-color: rgba(0,0,0,0); |
||||||
|
border-radius: 10px; |
||||||
|
display: none; |
||||||
|
} |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
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-gray-300"> |
||||||
|
<div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{ |
||||||
|
marginBottom:'-5px' |
||||||
|
}} 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-blue-700 text-white"> دوشنبه </h3> |
||||||
|
<h3 className="mr-4 bg-yellow-300 pl-6"> کتاااابی </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-2 border-solid border-gray-300 border-t-0 py-4 px-10" style={{ |
||||||
|
// marginTop: '-5px'
|
||||||
|
}}> |
||||||
|
{ |
||||||
|
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' |
||||||
|
/> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</ScrollContainer> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
list: state.book.list, |
||||||
|
isDark: state.publicApi.isDark, |
||||||
|
}); |
||||||
|
export default connect(mapStateToProps, { getList: book.list })(SalesContainer); |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import './index.css'; |
||||||
|
|
||||||
|
const VideoPlayer = ({ |
||||||
|
playerWidth, |
||||||
|
|
||||||
|
}) => { |
||||||
|
return( |
||||||
|
<video style={{ width: playerWidth, }} controls> |
||||||
|
<source |
||||||
|
src={`https://dnvn.ir/api/v1/file/20540`} |
||||||
|
type="video/mp4" |
||||||
|
/> |
||||||
|
</video> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default VideoPlayer; |
||||||
Binary file not shown.
|
After Width: | Height: | Size: 868 B |
@ -0,0 +1,348 @@ |
|||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
|
||||||
|
import StarRating from "../StarRating"; |
||||||
|
import ReactTooltip from "react-tooltip"; |
||||||
|
|
||||||
|
import watermelon from "./watermelon.png"; |
||||||
|
import video from "./danovin.mp4"; |
||||||
|
|
||||||
|
import discountImg from "./discount.png"; |
||||||
|
|
||||||
|
import heart from "./vuesax-linear-heart.svg"; |
||||||
|
import YellowDotIcon from "./yellowDotIcon.svg"; |
||||||
|
import RedDotIcon from "./redDotIcon.svg"; |
||||||
|
import PurpleDotIcon from "./purpleDotIcon.svg"; |
||||||
|
import LightBlueDotIcon from "./lightBlueDotIcon.svg"; |
||||||
|
import whitePlayIcon from "./white-play-button-icon.svg"; |
||||||
|
|
||||||
|
const VodProduct = ({ |
||||||
|
productColor, |
||||||
|
colors, |
||||||
|
likeBtn, |
||||||
|
discount, |
||||||
|
discountPricePercent, |
||||||
|
discountPrice, |
||||||
|
productContent, |
||||||
|
star, |
||||||
|
productTags, |
||||||
|
priceDirection, |
||||||
|
productTitleAlignment, |
||||||
|
priceHolder, |
||||||
|
productCat, |
||||||
|
rangeHolder, |
||||||
|
priceTitle, |
||||||
|
addToCartHolder, |
||||||
|
productTitleCategoryHolder, |
||||||
|
productTitleCategoryHolderAlignment, |
||||||
|
priceStarHolder, |
||||||
|
priceStarAlignment, |
||||||
|
rangeWidth, |
||||||
|
productTitle, |
||||||
|
poster, |
||||||
|
price |
||||||
|
}) => { |
||||||
|
const [progressFlag, setProgressFlag] = useState(false); |
||||||
|
// const [openModal, setOpenModal] = useState(false);
|
||||||
|
useEffect(() => { |
||||||
|
setTimeout(() => { |
||||||
|
setProgressFlag(true); |
||||||
|
}, 1000); |
||||||
|
}); |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{/* product UI Design */} |
||||||
|
<div className="flex flex-wrap sm:flex-nowrap justify-around"> |
||||||
|
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4"> |
||||||
|
<div |
||||||
|
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`} |
||||||
|
> |
||||||
|
{/* product image */} |
||||||
|
<div |
||||||
|
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer" |
||||||
|
style={{ |
||||||
|
backgroundImage: `url(${poster})`, |
||||||
|
backgroundSize: "100% 100%", |
||||||
|
backgroundRepeat: "no-repeat", |
||||||
|
minHeight: "180px", |
||||||
|
}} |
||||||
|
data-modal-toggle="large-modal" |
||||||
|
> |
||||||
|
{/* icons on image */} |
||||||
|
<div className="absolute left-2 top-2"> |
||||||
|
{discountPricePercent && ( |
||||||
|
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<p className="text-discountPriceTitle font-bold text-xs"> |
||||||
|
23<span>%</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{likeBtn && ( |
||||||
|
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<img src={heart} alt="" className="w-5" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{discount && ( |
||||||
|
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<img src={discountImg} alt="" className="w-full" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* play button */} |
||||||
|
<div |
||||||
|
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`} |
||||||
|
// onClick={() => setOpenModal(true)}
|
||||||
|
> |
||||||
|
<img |
||||||
|
src={whitePlayIcon} |
||||||
|
alt="" |
||||||
|
className="w-5 h-5" |
||||||
|
// onClick={() => setOpenModal(true)}
|
||||||
|
/> |
||||||
|
</div> |
||||||
|
{/* select Color */} |
||||||
|
{productColor && ( |
||||||
|
<div className="flex items-center absolute right-2 bottom-2"> |
||||||
|
{/* {colors.map((color,index))} */} |
||||||
|
<img |
||||||
|
src={YellowDotIcon} |
||||||
|
alt="" |
||||||
|
data-tip="زرد" |
||||||
|
className="w-3 h-3 ml-1 cursor-pointer" |
||||||
|
/> |
||||||
|
<ReactTooltip place="top" type="dark" effect="float" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* product content */} |
||||||
|
<div className="px-2"> |
||||||
|
{/* content */} |
||||||
|
<div className="mt-4 flex flex-col"> |
||||||
|
<div |
||||||
|
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} |
||||||
|
> |
||||||
|
<h2 |
||||||
|
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`} |
||||||
|
> |
||||||
|
{productTitle} |
||||||
|
</h2> |
||||||
|
{productCat && ( |
||||||
|
<span |
||||||
|
className={`text-xs font-light text-darkCrimsonTextColor`} |
||||||
|
> |
||||||
|
{productCat} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{productContent && ( |
||||||
|
<p |
||||||
|
className={`text-justify text-sm leading-6 text-productContent`} |
||||||
|
> |
||||||
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های |
||||||
|
خوب دیگری نیز دارد. |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* price */} |
||||||
|
<div |
||||||
|
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`} |
||||||
|
> |
||||||
|
{priceHolder && ( |
||||||
|
<div |
||||||
|
className={`flex items-center justify-between ${priceDirection}`} |
||||||
|
> |
||||||
|
{/* price */} |
||||||
|
<div className=""> |
||||||
|
<div |
||||||
|
className={`${ |
||||||
|
priceDirection.indexOf("col") !== -1 |
||||||
|
? "inline" |
||||||
|
: "flex" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{priceTitle && ( |
||||||
|
<span className="text-xs text-borderColor ml-2"> |
||||||
|
قیمت |
||||||
|
</span> |
||||||
|
)} |
||||||
|
{discountPrice && ( |
||||||
|
<p className="line-through text-xs text-borderColor"> |
||||||
|
<span> قیمت</span> 140<span>تومان</span> |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<p |
||||||
|
className={`text-sm font-semibold inline text-productPrice`} |
||||||
|
> |
||||||
|
{price}<span>تومان</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/* add to cart */} |
||||||
|
{addToCartHolder && ( |
||||||
|
<button |
||||||
|
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ |
||||||
|
priceDirection.indexOf("col") !== -1 ? "w-full" : "" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
اضافه کردن به سبد خرید |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{star && ( |
||||||
|
<div className="flex items-center"> |
||||||
|
<StarRating /> |
||||||
|
<span className="text-xs text-productContent font-bold mr-2"> |
||||||
|
39 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{productTags && ( |
||||||
|
<div className="mt-2 flex flex-wrap"> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
ارسال رایگان |
||||||
|
</button> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
برچسب های دیگر |
||||||
|
</button> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
دسته بندی به صورت کادو |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{rangeHolder && ( |
||||||
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
||||||
|
<div |
||||||
|
className={`bg-rangeFillBgColor h-3 rounded duration-500`} |
||||||
|
style={{ |
||||||
|
width: progressFlag ? rangeWidth : 0, |
||||||
|
}} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" |
||||||
|
id="large-modal" |
||||||
|
> |
||||||
|
<div class="relative px-4 w-full max-w-4xl h-full md:h-auto"> |
||||||
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> |
||||||
|
<div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" |
||||||
|
data-modal-toggle="large-modal" |
||||||
|
> |
||||||
|
<svg |
||||||
|
class="w-5 h-5" |
||||||
|
fill="currentColor" |
||||||
|
viewBox="0 0 20 20" |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
> |
||||||
|
<path |
||||||
|
fill-rule="evenodd" |
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" |
||||||
|
clip-rule="evenodd" |
||||||
|
></path> |
||||||
|
</svg> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="p-6 space-y-6"> |
||||||
|
<video |
||||||
|
controls |
||||||
|
className={`border transition-all duration-1000
|
||||||
|
`}
|
||||||
|
src={video} |
||||||
|
type="video/mp4" |
||||||
|
></video> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
|
||||||
|
); |
||||||
|
}; |
||||||
|
// hover:-translate-y-2
|
||||||
|
export default VodProduct; |
||||||
|
|
||||||
|
// text colors i used for product title:
|
||||||
|
// text-darkCrimsonTextColor
|
||||||
|
// text-productTitle
|
||||||
|
|
||||||
|
// text color i used for product excerpt:
|
||||||
|
// text-productContent
|
||||||
|
|
||||||
|
// text color i used for product cat:
|
||||||
|
// text-darkCrimsonTextColor
|
||||||
|
|
||||||
|
// bg color i used for play button icon:
|
||||||
|
// bg-playButtonIcon
|
||||||
|
// bg-playButtonIcon2
|
||||||
|
|
||||||
|
VodProduct.defaultProps = { |
||||||
|
colors: [ |
||||||
|
{ |
||||||
|
icon: YellowDotIcon, |
||||||
|
dataType: "زرد", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: RedDotIcon, |
||||||
|
dataType: "قرمز", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: PurpleDotIcon, |
||||||
|
dataType: "بنفش", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: LightBlueDotIcon, |
||||||
|
dataType: "آبی", |
||||||
|
}, |
||||||
|
|
||||||
|
LightBlueDotIcon, |
||||||
|
], |
||||||
|
|
||||||
|
// icons on product image
|
||||||
|
productColor: true, |
||||||
|
likeBtn: true, |
||||||
|
discount: true, |
||||||
|
discountPricePercent: true, |
||||||
|
// product price
|
||||||
|
discountPrice: true, |
||||||
|
priceHolder: true, |
||||||
|
priceTitle: false, |
||||||
|
|
||||||
|
productContent: false, |
||||||
|
star: true, |
||||||
|
productTags: false, |
||||||
|
productCat: true, |
||||||
|
rangeHolder: true, |
||||||
|
|
||||||
|
addToCartHolder: false, |
||||||
|
|
||||||
|
productTitleAlignment: "text-justify", |
||||||
|
|
||||||
|
// برای درصد دادن به عرض رنج
|
||||||
|
rangeWidth: "75%", |
||||||
|
|
||||||
|
priceDirection: "flex-row", |
||||||
|
|
||||||
|
productTitleCategoryHolder: "flex-row", |
||||||
|
productTitleCategoryHolderAlignment: "items-center", |
||||||
|
|
||||||
|
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
|
||||||
|
// یادمون باشه که حتما رویه
|
||||||
|
// flex-col-reverse
|
||||||
|
// بزاریم
|
||||||
|
|
||||||
|
// دیفالتش باید این باشه:
|
||||||
|
// priceStarHolder: flex-row
|
||||||
|
priceStarHolder: "flex-row", |
||||||
|
// دیفالتش باید این باشه:
|
||||||
|
// priceStarHolder: items-center
|
||||||
|
priceStarAlignment: "items-center", |
||||||
|
poster: watermelon |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 675 B |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 305 B |
|
After Width: | Height: | Size: 177 B |
@ -0,0 +1,48 @@ |
|||||||
|
import React, { useState, useEffect, useCallback } from "react"; |
||||||
|
import ScrollContainer from "react-indiana-drag-scroll"; |
||||||
|
import { connect } from 'react-redux'; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg'; |
||||||
|
import Banners from "../../../components/Banners"; |
||||||
|
import SalesContainer from "../../../components/SalesContainer"; |
||||||
|
|
||||||
|
import { book, publicApi } from "../../../redux/actions"; |
||||||
|
|
||||||
|
const DesktopHome = ( |
||||||
|
{ |
||||||
|
books, |
||||||
|
grades |
||||||
|
} |
||||||
|
|
||||||
|
) =>{ |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
|
||||||
|
<div className="flex flex-col items-center w-4/5 justify-center my-10"> |
||||||
|
<Banners/> |
||||||
|
<SalesContainer books={books} grades={grades}/> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
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); |
||||||
|
|
||||||
@ -1,25 +1,33 @@ |
|||||||
import React, { useEffect } from "react"; |
import React, { useEffect } from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import Landscape from "./Landscape"; |
// import Landscape from "./Landscape";
|
||||||
|
import DesktopHome from './Desktop'; |
||||||
import Portrait from "./Portrait"; |
import Portrait from "./Portrait"; |
||||||
import { publicApi } from "../../redux/actions"; |
import { publicApi } from "../../redux/actions"; |
||||||
|
|
||||||
function Home({ setHeaderOptions, headerOptions }) { |
function Home({ setHeaderOptions, headerOptions, isMobile }) { |
||||||
useEffect(() => { |
useEffect(() => { |
||||||
setHeaderOptions(headerOptions); |
setHeaderOptions(headerOptions); |
||||||
}, []); |
}, []); |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<Portrait /> |
|
||||||
<Landscape /> |
{ |
||||||
|
isMobile ? <Portrait /> : <div className="flex justify-center"><DesktopHome /></div> |
||||||
|
} |
||||||
|
|
||||||
|
{/* <Landscape /> */} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
const mapStateToProps = (state) => ({}); |
const mapStateToProps = (state) => ({ |
||||||
|
isMobile: state.publicApi.isMobile, |
||||||
|
}); |
||||||
|
|
||||||
const mapDispatchToProps = { |
const mapDispatchToProps = { |
||||||
setHeaderOptions: publicApi.setHeaderOptions, |
setHeaderOptions: publicApi.setHeaderOptions, |
||||||
|
|
||||||
}; |
}; |
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(Home); |
export default connect(mapStateToProps, mapDispatchToProps)(Home); |
||||||
|
|||||||
Loading…
Reference in new issue