reza added desktop login

temp
Reza_ashrafi 3 years ago
commit 9cbc44e59f
  1. BIN
      src/assets/images/HomeImg.png
  2. 856
      src/assets/images/HomeImg.svg
  3. 46
      src/components/Product/index.js
  4. 4
      src/components/SalesContainer/index.js
  5. 87
      src/views/Home/Desktop/Part2/index.js
  6. 6
      src/views/Home/Desktop/index.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 256 KiB

@ -41,14 +41,16 @@ const ProductDesign = ({
productImg, productImg,
writeGHEIMAT, writeGHEIMAT,
numberOfRegards, numberOfRegards,
productHolderHoverBorder productHolderHoverBorder,
hoverMode
}) => { }) => {
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
return ( return (
<div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3"> <div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
<div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4"> <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4" onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}>
<div <div
className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} hover:${productHolderHoverBorder}`} className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-blue-100' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
> >
{/* product image */} {/* product image */}
<div className="w-full relative"> <div className="w-full relative">
@ -79,8 +81,7 @@ const ProductDesign = ({
src={productImg} src={productImg}
alt="" alt=""
className="h-full rounded-lg cursor-pointer py-5" className="h-full rounded-lg cursor-pointer py-5"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/> />
)} )}
{horizontalImg && ( {horizontalImg && (
@ -120,13 +121,7 @@ const ProductDesign = ({
<ReactTooltip place="top" type="dark" effect="float" /> <ReactTooltip place="top" type="dark" effect="float" />
</div> </div>
)} */} )} */}
<div
className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${
isHovering ? "" : "hidden"
}`}
>
{/* <button>افزودن به سبد خرید</button> */}
</div>
</div> </div>
{/* product content */} {/* product content */}
<div className="px-2"> <div className="px-2">
@ -166,9 +161,8 @@ const ProductDesign = ({
> >
<div className="mt-2"> <div className="mt-2">
<div <div
className={`${ className={`${priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
priceDirection.indexOf("col") !== -1 ? "inline" : "flex" }`}
}`}
> >
{writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>} {writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>}
{/* price with line on it */} {/* price with line on it */}
@ -185,15 +179,30 @@ const ProductDesign = ({
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${ className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${priceDirection.indexOf("col") !== -1 ? "w-full" : ""
priceDirection.indexOf("col") !== -1 ? "w-full" : "" }`}
}`}
> >
اضافه کردن به سبد خرید اضافه کردن به سبد خرید
</button> </button>
)} )}
</div> </div>
)} )}
{hoverMode == 'blue' ?<div className="w-full flex justify-center mt-4">
<div
className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${isHovering ? "" : "hidden"
}`}
>
<button>افزودن به سبد خرید</button>
</div>
</div> : null}
{/* {productTags && ( {/* {productTags && (
<div className="mt-2 flex flex-wrap"> <div className="mt-2 flex flex-wrap">
{ {
@ -208,6 +217,7 @@ const ProductDesign = ({
></div> ></div>
</div> </div>
)} )}
</div> </div>
</div> </div>
</div> </div>

@ -46,9 +46,7 @@ const SalesContainer = ({
</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={{ <ScrollContainer className="flex overflow-x-scroll border-2 border-solid border-gray-300 border-t-0 py-4 px-10">
// marginTop: '-5px'
}}>
{ {
list?.map((product, index) => ( list?.map((product, index) => (
<Link to={"/products/" + product?.id}> <Link to={"/products/" + product?.id}>

@ -0,0 +1,87 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { book} from '../../../../redux/actions'
import { Link } from "react-router-dom";
import Product from '../../../../components/Product';
import Button from "../../../../components/Button";
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: '500px'
}}>
<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"
/>
</Link>
</div>
</div>
<ScrollContainer className="flex overflow-x-scroll py-4 px-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'
/>
</Link>
))}
</ScrollContainer>
</div>
)
}
const mapStateToProps = (state) => ({
books: state.book.list,
isDark: state.publicApi.isDark,
});
export default connect(mapStateToProps, { getBooks: book.list })(Part2);

@ -7,6 +7,8 @@ import Banners from "../../../components/Banners";
import SalesContainer from "../../../components/SalesContainer"; import SalesContainer from "../../../components/SalesContainer";
import { book, publicApi } from "../../../redux/actions"; import { book, publicApi } from "../../../redux/actions";
import Part2 from "./Part2";
import HomeImg from '../../../assets/images/HomeImg.svg';
const DesktopHome = ( const DesktopHome = (
{ {
@ -22,6 +24,10 @@ return (
<div className="flex flex-col items-center w-11/12 justify-center my-10"> <div className="flex flex-col items-center w-11/12 justify-center my-10">
<Banners/> <Banners/>
<SalesContainer books={books} grades={grades}/> <SalesContainer books={books} grades={grades}/>
<Part2 grades={grades}/>
<div>
<img src={HomeImg} />
</div>
</div> </div>
) )

Loading…
Cancel
Save