Product Fixed And Added A New Mode: Big

temp
Pedram Keshavarzi 3 years ago
parent c4c3a36ae6
commit ba29955cb0
  1. 31
      src/components/Product/index.js
  2. 6
      src/components/SalesContainer/index.js
  3. 3
      src/components/StarRating/index.js
  4. 3
      src/views/Home/Desktop/Part2/index.js

@ -12,6 +12,7 @@ import YellowDotIcon from "./yellowDotIcon.svg";
import RedDotIcon from "./redDotIcon.svg"; import RedDotIcon from "./redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg"; import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg"; import LightBlueDotIcon from "./lightBlueDotIcon.svg";
import StarRatingComponent from "react-star-rating-component";
const ProductDesign = ({ const ProductDesign = ({
colors, colors,
@ -42,15 +43,20 @@ const ProductDesign = ({
writeGHEIMAT, writeGHEIMAT,
numberOfRegards, numberOfRegards,
productHolderHoverBorder, productHolderHoverBorder,
hoverMode hoverMode,
big,
starRate
}) => { }) => {
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 ${big ? 'm-1' : 'w-48 m-2'} `}
<div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4" onMouseEnter={() => setIsHovering(true)} style={big ? {width: '300px'} : {}}
>
<div className="w-full flex flex-wrap items-center justify-around my-5 px-4" onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}> 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} ${hoverMode == 'blue' ? 'hover:bg-blue-100' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder}`} className={`w-full sm:w-60 md:w-72 ${big ? '' : 'mx-5'} rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-grayF4' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
> >
{/* product image */} {/* product image */}
<div className="w-full relative"> <div className="w-full relative">
@ -75,7 +81,7 @@ const ProductDesign = ({
)} )}
</div> </div>
{/* img */} {/* img */}
<div className="w-full h-48 flex bg-grayF4 p-0 justify-center rounded-lg"> <div className={`w-full ${big ? 'h-60' : 'h-48'} flex bg-grayF4 p-0 justify-center rounded-lg`}>
{verticalImg && ( {verticalImg && (
<img <img
src={productImg} src={productImg}
@ -127,7 +133,7 @@ const ProductDesign = ({
<div className="px-2"> <div className="px-2">
<div className="mt-4"> <div className="mt-4">
<h2 <h2
className={`leading-4 text-xs py-1 ${productTitleColor} ${productTitleAlignment}`} className={`leading-4 text-xl font-black py-2 ${productTitleColor} ${productTitleAlignment}`}
> >
{productName} {productName}
</h2> </h2>
@ -140,16 +146,19 @@ const ProductDesign = ({
</p> </p>
)} )}
{productCat && ( {productCat && (
<span className={`text-sm font-light ${productCatTextColor}`}> <span className={`text-md py-1 font-light ${productCatTextColor}`}>
{productCat} {productCat}
</span> </span>
)} )}
</div> </div>
{/* star */} {/* star */}
{star && ( {star && (
<div className="flex items-center mt-2"> <div className="flex items-center mt-3">
<StarRating /> <StarRatingComponent
<span className="text-sm-1 text-productContent font-bold mr-2"> name="Product"
value={starRate}
/>
<span className="text-xs text-productContent font-bold text-gray-500 mr-2">
بر اساس {numberOfRegards} بررسی بر اساس {numberOfRegards} بررسی
</span> </span>
</div> </div>
@ -172,7 +181,7 @@ const ProductDesign = ({
</p> </p>
)} )}
</div> </div>
<p className="text-sm text-productPrice font-semibold inline text-blue5F"> <p className="text-xl text-productPrice font-semibold inline text-blue5F">
{productPrice} <span>تومان</span> {productPrice} <span>تومان</span>
</p> </p>
</div> </div>

@ -20,7 +20,7 @@ const SalesContainer = ({
}, []); }, []);
return( return(
<div className="w-full my-10"> <div className="w-full my-10">
<div className="w-full border-b-2 border-solid border-gray-300"> <div className="w-full">
<div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{ <div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{
marginBottom:'-5px' marginBottom:'-5px'
}} onClick={() => console.log(list)}> }} onClick={() => console.log(list)}>
@ -46,7 +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"> <ScrollContainer className="flex overflow-x-scroll border-t-0 py-4 px-10" >
{ {
list?.map((product, index) => ( list?.map((product, index) => (
<Link to={"/products/" + product?.id}> <Link to={"/products/" + product?.id}>
@ -64,6 +64,8 @@ const SalesContainer = ({
productCatTextColor='text-blueC0' productCatTextColor='text-blueC0'
productHolderBorder='' productHolderBorder=''
productHolderHoverBorder='shadow-md' productHolderHoverBorder='shadow-md'
big
starRate={Math.floor(Math.random() * 5) + 1}
/> />
</Link> </Link>
))} ))}

@ -1,7 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import StarRatingComponent from "react-star-rating-component"; import StarRatingComponent from "react-star-rating-component";
function StarRating() { function StarRating({rate}) {
const [rate, setRating] = useState(2); const [rate, setRating] = useState(2);
return ( return (
<StarRatingComponent <StarRatingComponent
@ -9,6 +9,7 @@ function StarRating() {
starCount={5} starCount={5}
value={rate} value={rate}
onStarHover={(value) => setRating(value)} onStarHover={(value) => setRating(value)}
/> />
); );
} }

@ -71,7 +71,8 @@ const Part2 = (
productHolderBorder='' productHolderBorder=''
productHolderHoverBorder='shadow-md' productHolderHoverBorder='shadow-md'
hoverMode='blue' hoverMode='blue'
big
starRate={Math.floor(Math.random() * 5) + 1}
/> />
</Link> </Link>
))} ))}

Loading…
Cancel
Save