master
mahdi 3 years ago
parent 2419316382
commit 35e94d1ec5
  1. 28
      src/components/productDesign/ProductDesign.js
  2. 9
      src/components/vodProductDesign/VodProductDesign.js

@ -39,6 +39,7 @@ const ProductDesign = ({
horizontalImg,
rangeWidth,
addToCartHolder,
mainPriceTitle,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
useEffect(() => {
@ -88,10 +89,10 @@ const ProductDesign = ({
</p>
</div>
{/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="flex flex-wrap sm:flex-nowrap justify-around ">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
<div
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
className={`group w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 relative cursor-pointer ${productHolderBorder} ${productHolderBorderColor} hover:border-0`}
>
{/* product image */}
<div className="w-full relative group">
@ -161,9 +162,6 @@ const ProductDesign = ({
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)}
<button className="group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition duration-300">
افزودن به سبد خرید
</button>
</div>
{/* product content */}
<div className="px-2">
@ -207,18 +205,20 @@ const ProductDesign = ({
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">
قیمت
</span>
{mainPriceTitle && (
<span className="text-xs text-borderColor ml-2">
قیمت
</span>
)}
{/* price with line on it */}
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
<p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span>
</p>
)}
</div>
<p className="text-sm text-productPrice font-semibold inline">
145.000<span>تومان</span>
130.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
@ -257,6 +257,11 @@ const ProductDesign = ({
</div>
)}
</div>
{/* dark hover effect */}
<div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-black group-hover:rounded group-hover:border transition duration-300 opacity-50"></div>
<button className="group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition duration-300">
افزودن به سبد خرید
</button>
</div>
</div>
</div>
@ -283,6 +288,7 @@ ProductDesign.defaultProps = {
discount: true,
discountPricePercent: true,
// product price
mainPriceTitle: false,
discountPrice: true,
priceHolder: true,

@ -46,6 +46,7 @@ const VodProductDesign = ({
priceStarAlignment,
rangeWidth,
playBtnBgColor,
mainPriceTitle,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
useEffect(() => {
@ -199,15 +200,15 @@ const VodProductDesign = ({
</span>
)}
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
<p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span>
</p>
)}
</div>
<p
className={`text-sm font-semibold inline ${productPriceAmountTitle}`}
>
145.000<span>تومان</span>
111.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
@ -285,7 +286,7 @@ VodProductDesign.defaultProps = {
discount: true,
discountPricePercent: true,
// product price
discountPrice: false,
discountPrice: true,
priceHolder: true,
priceTitle: false,

Loading…
Cancel
Save