reza fixed product

temp
Reza_ashrafi 3 years ago
parent 66fda6c014
commit 1b0086e570
  1. 150
      src/components/AddToCart/index.js
  2. 2
      src/components/Button/index.js
  3. 111
      src/components/ProductDescription/index.js
  4. 60
      src/components/ProductImage/index.js
  5. 9
      src/components/ProductImage/index.scss
  6. 8
      src/components/ProductImage/product-chair.svg
  7. BIN
      src/components/ProductImage/product-image.jpg
  8. 11
      src/components/ProductStatusCard/arrow-icon.svg
  9. 11
      src/components/ProductStatusCard/delivery-icon.svg
  10. 12
      src/components/ProductStatusCard/icon-shop.svg
  11. 6
      src/components/ProductStatusCard/icon1.svg
  12. 125
      src/components/ProductStatusCard/index.js
  13. 6
      src/components/ProductStatusCard/info-circle.svg
  14. 5
      src/components/ProductStatusCard/shield-tick.svg
  15. 5
      src/components/ProductStatusCard/tick-circle.svg
  16. 110
      src/components/ProductSuggestion/index.js
  17. 3
      src/components/ProductSuggestion/plus.svg
  18. 8
      src/components/ProductSuggestion/product-chair.svg
  19. 51
      src/components/ProductTab/index.js
  20. 47
      src/components/ProductTab/table/index.js
  21. 214
      src/views/Product/Desktop/ProductOverAll/index.js
  22. 2
      src/views/Product/Desktop/index.js

@ -1,80 +1,88 @@
import React from "react";
import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg';
import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg';
import linearGroup from '../../assets/icons/vuesax-linear-group.svg';
import circleTick from "../../assets/icons/vuesax-linear-tick-circle.svg";
import shieldTick from "../../assets/icons/vuesax-linear-shield-tick.svg";
import linearGroup from "../../assets/icons/vuesax-linear-group.svg";
const AddToCartCard = ({
numberOfSuggest,
sendingTime,
button,
price,
profit,
showProduct,
productName,
productImg,
productCat,
footer
}) =>{
const specialities = [
{
icon: circleTick,
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
},
{
icon: linearGroup,
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
},
{
icon: shieldTick,
description: `گارانتی اصالت و سلامت فیزیکی`,
}
];
return(
<>
<div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center max-w-xs">
{
showProduct && <div className="flex w-full max-w-8 overflow-hidden items-center py-4 m-0 justify-center">
<img src={productImg} style={{maxWidth:'100px'}} className=" bg-grayF4 py-2 px-4 bg-grayF4 rounded ml-4" />
<div className="text-sm">
<h1 className="text-sm">{productName}</h1>
<p className=" text-xs pt-2 text-blueC0">{productCat}</p>
</div>
</div>
}
{specialities.map((item, index) => (
<div className="flex items-center p-2 w-full border-0 border-b border-solid border-gray-300">
{item.icon && <img src={item.icon} className="pl-3" />}
<p className="text-sm text-blue52 text-right">{item.description}</p>
</div>
))}
<div className="w-full flex flex-col items-center justify-center p-4">
<h1 className="text-xl text-gray-500">
<span className=" text-blueC0"> {price} </span>
تومان </h1>
{ profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>}
</div>
<div className="w-full flex justify-center">
{button}
numberOfSuggest,
sendingTime,
button,
price,
profit,
showProduct,
productName,
productImg,
productCat,
footer,
}) => {
const specialities = [
{
icon: circleTick,
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
},
{
icon: linearGroup,
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
},
{
icon: shieldTick,
description: `گارانتی اصالت و سلامت فیزیکی`,
},
];
return (
<>
<div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center">
{showProduct && (
<div className="flex w-full max-w-8 overflow-hidden items-center py-4 m-0 justify-center">
<img
src={productImg}
style={{ maxWidth: "100px" }}
className="py-2 px-4 bg-grayF4 rounded ml-4"
/>
<div className="text-sm">
<h1 className="text-sm">{productName}</h1>
<p className=" text-xs pt-2 text-blueC0">{productCat}</p>
</div>
</div>
)}
{specialities.map((item, index) => (
<div className="flex items-center p-2 w-full border-0 border-b border-solid border-gray-300">
{item.icon && <img src={item.icon} className="pl-3" />}
<p className="text-sm text-blue52 text-right">{item.description}</p>
</div>
))}
<div className="w-full flex flex-col items-center justify-center p-4">
<h1 className="text-xl text-gray-500">
<span className=" text-blueC0"> {price} </span>
تومان{" "}
</h1>
{profit && (
<h5 className="text-xs p-2 pb-0 text-blue52">
با خرید این کالا {profit} تومان سود کنید
</h5>
)}
</div>
{footer &&
<div className="w-full flex justify-center">{button}</div>
</div>
{footer && (
<div className="flex bg-grayF7 p-4 w-full mx-4 items-center mt-4 max-w-xs">
{
footer == 'SendBack' &&
<>
<img src={specialities[0].icon} className="pl-3"/>
<div className="text-sm">
<h3 className="text-blue52">بازگشت بی چون و چرا</h3>
<p>ما خیلی خوب هستیم و دوستتون داریم در صورتی که از کالایی خوشتون نیومد میتونید بی قید و شرط بسش بدید</p>
</div>
</>
}
</div>}
</>
);
{footer == "SendBack" && (
<>
<img src={specialities[0].icon} className="pl-3" />
<div className="text-sm">
<h3 className="text-blue52">بازگشت بی چون و چرا</h3>
<p>
ما خیلی خوب هستیم و دوستتون داریم در صورتی که از کالایی خوشتون
نیومد میتونید بی قید و شرط بسش بدید
</p>
</div>
</>
)}
</div>
)}
</>
);
};
export default AddToCartCard;
export default AddToCartCard;

@ -17,7 +17,7 @@ export default function Button({
}) {
return (
<button
className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} justify-center text-sm cursor-pointer lg:py-5 ${
className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} justify-center text-sm lg:text-tiny cursor-pointer lg:py-4 ${
selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity

@ -1,111 +0,0 @@
import React from "react";
const ProductDescription = ({
navTitles,
items,
addToCart
}) =>{
return(
<>
<div className="flex w-full rounded bg-gray-200 justify-center mt-6 ">
<ul className="w-full flex justify-center">
{navTitles.map(item => <li key={`NavTitle_${item.id}`}
className={`p-6 mx-4 cursor-pointer
${item.isActive ? 'border-0 border-b-4 border-solid border-blue-500' : null}`
}
onClick={() => item.isActive ? null : item.isActive = !item.isActive }>
{item.title}</li>)}
</ul>
</div>
<div className="flex w-full ">
<div className="flex-1 ">
{items.map(e => (
e.items.map(item => (
<ul className="flex w-full flex-1 my-2 items-center">
<li className="py-4 px-8 min-w-md bg-gray-200 ml-4 text-blueC0" style={{minWidth: '300px'}}>{item.title}</li>
<li className="py-4 px-8 min-w-md bg-gray-200 ml-4 w-full">{item.description}</li>
</ul>
))
))}
</div>
<div className="my-2">
{addToCart}
</div>
</div>
</>
);
};
export default ProductDescription;
ProductDescription.defaultProps = {
navTitles: [
{
id: 0,
title: 'مشخصات',
isActive: true,
name: 'moshakhasat'
},
{
id: 1,
title: 'نقد و بررسی',
isActive: false
},
{
id: 2,
title: 'برسش و باسخ',
isActive:false
},
],
items: [
{
name: 'moshakhasat',
items: [
{
title : 'وزن کتاب',
description: '۱ کیلوگرم'
},
{
title : 'تعداد صفحات',
description: '400 صفحه'
},
{
title : 'نوع کاغذ',
description: 'گلاسه'
},
{
title : 'شماره شابک',
description: '1225548218000005818765'
},
{
title : 'انتشارات',
description: 'رزمندگان'
},
{
title : 'نویسنده و یا معلف',
description: 'یک نویسنده گمنام'
},
{
title : 'قطع',
description: 'خشتی'
},
{
title : 'سال انتشار',
description: '1399'
},
]
}
]
}

@ -0,0 +1,60 @@
import React from "react";
import "./index.scss";
import productImg from "./product-image.jpg";
const ProductImage = ({ images }) => {
console.log(images.length);
return (
<div className="flex flex-row w-1/3 gap-2">
<div className="flex flex-col items-center justify-between w-1/5" style={{height : 'calc(100vw / 5)'}}>
{images.slice(0, 4).map((image, index) => (
<div className="relative" style={{ width : "calc(100vw / 5 / 4 - 4px)", height : "calc(100vw / 5 / 4 - 4px)"}}>
<img
key={index}
src={productImg}
alt=""
className={`rounded-sm w-full h-full`}
// style={{ height: "calc(100% - 8px)" }}
// style={{ height: "calc(100% - 8px)" }}
/>
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
{Number(index) === 3 && (
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
<strong>+ {images.length - 3}</strong>
</div>
)}
</div>
))}
</div>
<img src={productImg} alt="" style={{ height : "calc(100vw / 5)", width : "calc(100vw / 5)"}} />
</div>
);
};
// {[0, 1, 2, 3, 4].map((item, index) => (
// ))}
export default ProductImage;
ProductImage.defaultProps = {
images: [
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
],
};

@ -0,0 +1,9 @@
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

@ -0,0 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="41.268" height="41.268" viewBox="0 0 41.268 41.268">
<path id="Vector" d="M0,0H17.195" transform="translate(20.634 9.56)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(20.634 3.439)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H17.195" transform="translate(3.439 29.334)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(3.439 23.213)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<g id="Group-2" data-name="Group" transform="translate(3.439 3.439)">
<path id="Vector-5" data-name="Vector" d="M12.036,0A12.028,12.028,0,0,1,0,12.036L1.805,9.027" transform="translate(22.353 22.353)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,12.036A12.028,12.028,0,0,1,12.036,0L10.231,3.009" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
<path id="Vector-7" data-name="Vector" d="M0,0H41.268V41.268H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -0,0 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="51.463" height="51.463" viewBox="0 0 51.463 51.463">
<path id="Vector" d="M20.349,25.732h2.144a4.3,4.3,0,0,0,4.289-4.289V0H7.484A8.569,8.569,0,0,0,0,4.4" transform="translate(5.382 4.289)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,25.732a6.424,6.424,0,0,0,6.433,6.433H8.577a4.289,4.289,0,0,1,8.577,0h8.577a4.289,4.289,0,0,1,8.577,0h2.144a6.424,6.424,0,0,0,6.433-6.433V19.3H36.453a2.151,2.151,0,0,1-2.144-2.144V10.722a2.151,2.151,0,0,1,2.144-2.144h2.766L35.553,2.166A4.324,4.324,0,0,0,31.822,0H27.876V15.01A4.3,4.3,0,0,1,23.587,19.3H21.443" transform="translate(4.289 10.722)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(12.866 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(30.02 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M8.577,6.433v4.289H2.144A2.151,2.151,0,0,1,0,8.577V2.144A2.151,2.151,0,0,1,2.144,0H4.91Z" transform="translate(38.598 19.299)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H12.866" transform="translate(4.289 17.154)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H8.577" transform="translate(4.289 23.587)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H4.289" transform="translate(4.289 30.02)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-9" data-name="Vector" d="M0,0H51.463V51.463H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -0,0 +1,12 @@
<svg id="Group_207" data-name="Group 207" xmlns="http://www.w3.org/2000/svg" width="45.601" height="45.601" viewBox="0 0 45.601 45.601">
<g id="Path_95" data-name="Path 95" transform="translate(0 0)" fill="#fff">
<path d="M 33.83258438110352 44.8504524230957 L 11.76785469055176 44.8504524230957 C 8.824884414672852 44.8504524230957 6.058054447174072 43.70439529418945 3.977064371109009 41.62339401245117 C 1.896064281463623 39.54239273071289 0.7500042915344238 36.77556610107422 0.7500042915344238 33.83258438110352 L 0.7500042915344238 8.825894355773926 C 0.7500042915344238 4.372834205627441 4.372834205627441 0.7500042915344238 8.825894355773926 0.7500042915344238 L 36.77455520629883 0.7500042915344238 C 41.24808502197266 0.7500042915344238 44.8504524230957 6.086584091186523 44.8504524230957 10.50503444671631 L 44.8504524230957 33.83258438110352 C 44.8504524230957 36.77556610107422 43.70439529418945 39.54239273071289 41.62339401245117 41.62339401245117 C 39.54239273071289 43.70439529418945 36.77556610107422 44.8504524230957 33.83258438110352 44.8504524230957 Z" stroke="none"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="#3fa7ce"/>
</g>
<path id="Path_94" data-name="Path 94" d="M0,0S12.538,4.734,23.6,4.734A52.3,52.3,0,0,0,44.245,0" transform="translate(0.355 11.893)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_201" data-name="Line 201" x1="4.702" y1="14.752" transform="translate(26.924 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_202" data-name="Line 202" x1="4.759" y2="14.752" transform="translate(12.503 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<path id="Path_93" data-name="Path 93" d="M0,4.009S-2.153-10.205,7.212-10.538,14.377,4.009,14.377,4.009" transform="translate(16.048 40.303)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_203" data-name="Line 203" x1="12.209" transform="translate(16.696 21.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
<line id="Line_204" data-name="Line 204" x1="12.209" transform="translate(16.696 25.742)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="45.6" height="45.6" viewBox="0 0 45.6 45.6">
<g id="Path_95" data-name="Path 95" fill="#fff">
<path d="M 33.83258438110352 44.8504524230957 L 11.76785469055176 44.8504524230957 C 8.824884414672852 44.8504524230957 6.058054447174072 43.70439529418945 3.977064371109009 41.62339401245117 C 1.896064281463623 39.54239273071289 0.7500042915344238 36.77556610107422 0.7500042915344238 33.83258438110352 L 0.7500042915344238 8.825894355773926 C 0.7500042915344238 4.372834205627441 4.372834205627441 0.7500042915344238 8.825894355773926 0.7500042915344238 L 36.77455520629883 0.7500042915344238 C 41.24808502197266 0.7500042915344238 44.8504524230957 6.086584091186523 44.8504524230957 10.50503444671631 L 44.8504524230957 33.83258438110352 C 44.8504524230957 36.77556610107422 43.70439529418945 39.54239273071289 41.62339401245117 41.62339401245117 C 39.54239273071289 43.70439529418945 36.77556610107422 44.8504524230957 33.83258438110352 44.8504524230957 Z" stroke="none"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="#3fa7ce"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,125 @@
import React from "react";
import {connect} from 'react-redux';
import Button from "../Button";
import arrow from "./arrow-icon.svg";
import delivery from "./delivery-icon.svg";
import checked from "./icon1.svg";
import circle from "./info-circle.svg";
import shield from "./shield-tick.svg";
import tick from "./tick-circle.svg";
import shop from "./icon-shop.svg";
const ProductStatusCard = ({ items, productPrice, discountPrice, isDark }) => {
return (
<section className="w-full">
<div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200">
{items.map((item, index) => (
<div
className="flex flex-row items-center justify-between py-3"
key={index}
>
<div className="flex flex-row items-center">
<img src={item.icon} alt="" className="w-8" />
<div className="flex flex-col mr-3">
<p className="text-sm">
<span className="font-bold">{item.subtitle}</span>
{item.title}
</p>
{item.customerSatisfaction && (
<p className="text-xs mt-1">
رضایت خریداران:
<span className="font-bold text-green-500 mr-2">
{item.customerSatisfactionPercent}
</span>
</p>
)}
</div>
</div>
{item.alertIcon && <img src={circle} alt="" className="w-5" />}
</div>
))}
<div className="flex flex-col items-center py-3">
<p className="text-xl text-blue-600">
{productPrice}
<span className="text-sm text-gray-700 font-light">تومان</span>
</p>
<p className="text-xs font-light text-gray-600 mt-2">
با خرید این کالا
<span>{discountPrice}</span>
صرفه جویی کنید
</p>
</div>
<Button
title="اصافه کردن به سبد خرید"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="100%"
color={"text-white"}
selectable={true}
onClick={() => {}}
/>
</div>
<div className="bg-grayF9 rounded px-4 py-2 mt-4 flex flex-row items-center">
<div>
<img src={arrow} alt="" className="w-20 h-20" />
</div>
<div className="flex flex-col mr-5">
<h2 className="text-sm font-bold text-blue-900">
بازگشت بی چون و چرا
</h2>
<p className="text-xs mt-2 leading-5 text-justify">
از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی
خوشتون نیومده میتونید بی قید و شرط پس بدید
</p>
</div>
</div>
</section>
);
};
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
})
export default connect(mapStateToProps)(ProductStatusCard);
ProductStatusCard.defaultProps = {
items: [
{
icon: tick,
title: "توصیه به خرید توسط 4420 نفر",
subtitle: null,
alertIcon: false,
customerSatisfaction: false,
customerSatisfactionPercent: null,
},
{
icon: shop,
title: " آپادانا ",
subtitle: " فروشنده",
alertIcon: true,
customerSatisfaction: true,
customerSatisfactionPercent: " 91.5 ",
},
{
icon: delivery,
title: " 20 روز کاری پس از سفارش ",
subtitle: "زمان ارسال",
alertIcon: false,
customerSatisfaction: false,
customerSatisfactionPercent: null,
},
{
icon: shield,
title: "اصالت و سلامت فیزیکی",
subtitle: "گارانتی ",
alertIcon: true,
customerSatisfaction: false,
customerSatisfactionPercent: null,
},
],
productPrice: " 56/894/000 ",
discountPrice: " 540.000 ",
};

@ -0,0 +1,6 @@
<svg id="info-circle" xmlns="http://www.w3.org/2000/svg" width="31.269" height="31.269" viewBox="0 0 31.269 31.269">
<path id="Vector" d="M13.029,26.057A13.029,13.029,0,1,0,0,13.029,13.067,13.067,0,0,0,13.029,26.057Z" transform="translate(2.606 2.606)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0V6.514" transform="translate(15.634 10.423)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.012" transform="translate(15.627 20.846)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H31.269V31.269H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 829 B

@ -0,0 +1,5 @@
<svg id="shield-tick" xmlns="http://www.w3.org/2000/svg" width="52.115" height="52.115" viewBox="0 0 52.115 52.115">
<path id="Vector" d="M15.374.5,4.538,4.587A7.535,7.535,0,0,0,0,11.123V27.257a10.557,10.557,0,0,0,3.757,7.47l9.337,6.97a9.883,9.883,0,0,0,11.161,0l9.337-6.97a10.557,10.557,0,0,0,3.757-7.47V11.123a7.54,7.54,0,0,0-4.538-6.558L21.975.5A11.041,11.041,0,0,0,15.374.5Z" transform="translate(7.405 4.337)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,5.841l3.5,3.5L12.833,0" transform="translate(19.652 19.934)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H52.115V52.115H0Z" transform="translate(52.115 52.115) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 864 B

@ -0,0 +1,5 @@
<svg id="tick-circle" xmlns="http://www.w3.org/2000/svg" width="55.143" height="55.143" viewBox="0 0 55.143 55.143">
<path id="Vector" d="M22.976,45.952A22.976,22.976,0,1,0,0,22.976,23.044,23.044,0,0,0,22.976,45.952Z" transform="translate(4.595 4.595)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,6.5,6.5,13,19.53,0" transform="translate(17.807 21.069)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H55.143V55.143H0Z" fill="#afe7ab" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 652 B

@ -0,0 +1,110 @@
import React, { useState } from "react";
import {connect} from 'react-redux';
import Button from "../Button";
import productImg from "./product-chair.svg";
import plus from "./plus.svg";
const ProductSuggestion = ({ suggestions, isDark }) => {
const [selectedProduct, setSelectedProduct] = useState(null);
return (
<section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9">
<h2 className="text-center text-lg font-bold text-productPrice">
این کالاها برای خرید به شما پیشنهام می دهیم
</h2>
{/* product design */}
<div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full">
{suggestions.map((suggestion, index) => (
<div className="flex flex-row mb-7 justify-center relative" style={{ width : 'calc(100% / 4.5)' }} key={index}>
<div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer bg-white
${selectedProduct === suggestion ? "bg-white" : ""}`}
onClick={() => setSelectedProduct(suggestion)}
>
<img src={suggestion.productImage} alt="" className="w-full" />
<h2 className="my-3 text-tiny">
{suggestion.productTitle}
</h2>
<p className="text-base text-blueC0 font-medium">
{suggestion.productPrice}
<span className="mr-1 text-xs text-black">تومان</span>
</p>
{/* <div className="flex flex-col items-center mt-3">
<span className="text-xs">انتخاب شما</span>
<input
className="checkbox-input-checked mt-4 cursor-pointer w-4 h-4"
type="checkbox"
/>
</div> */}
</div>
{Number(index) !== suggestions.length - 1 && (
<img src={plus} alt="" className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2" />
)}
</div>
))}
</div>
{/* bottom */}
<div className="flex flex-col justify-center items-center mt-4">
<div className="flex flex-row mb-5">
<p className="text-base text-productPrice font-bold">
جمع لوازم اختیاری خریداری شده
<span> 56/894/400 </span>
تومان
</p>
<span className="text-lightBlueTextColor text-base mr-1 font-bold">
1 کالا
</span>
</div>
<p className="text-sm font-light text-gray-600 mb-4">
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
</p>
<Button
title="اصافه کردن به سبد خرید"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="calc(100% / 5)"
color={"text-white"}
selectable={true}
onClick={() => {}}
/>
</div>
</section>
);
};
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
})
export default connect(mapStateToProps)(ProductSuggestion);
ProductSuggestion.defaultProps = {
suggestions: [
{
productImage: productImg,
productTitle: "لپ تاپ گیمینگ ایسوس",
productPrice: "750000",
plusIcon: null,
},
{
productImage: productImg,
productTitle: "مانیتور 40 اینچ",
productPrice: "3.000.000",
plusIcon: plus,
},
{
productImage: productImg,
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
plusIcon: plus,
},
{
productImage: productImg,
productTitle: "لپ تاپ مک بوک پرو 2022",
productPrice: "2000",
plusIcon: plus,
},
],
};

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="58" viewBox="0 0 29 58">
<text id="_" data-name="+" transform="translate(29 47)" fill="#132f52" font-size="44" font-family="SegoeUI-Light, Segoe UI" font-weight="300"><tspan x="-28.596" y="0">+</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 277 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 39 KiB

@ -0,0 +1,51 @@
import React, { useState } from "react";
import Table from "./table";
const ProductTab = ({ tabs }) => {
const [selectedTab, setSelectedTab] = useState(tabs[0]);
return (
<section className="mt-10 flex flex-col w-full">
<div className="rounded-md bg-grayF9">
<ul className="flex flex-row">
{tabs.map((tab, index) => (
<li
className={`text-sm m-4 cursor-pointer hover:text-blue-400 ${
selectedTab === tab ? "text-blue-600" : ""
}`}
onClick={() => setSelectedTab(tab)}
key={index}
>
{tab.title}
</li>
))}
</ul>
</div>
<div className={`rounded w-full flex items-center ${selectedTab?.bg}`}>
{selectedTab?.components}
</div>
</section>
);
};
export default ProductTab;
ProductTab.defaultProps = {
tabs: [
{
title: "مشخصات",
components: <Table />,
bg: "bg-transparent",
},
{
title: "پرسش",
components: "نقد و بررسی",
bg: "bg-blue-500",
},
{
title: "سوال",
components: "پرسش و پاسخ",
bg: "bg-yellow-500",
},
],
};

@ -0,0 +1,47 @@
import React from "react";
const persian = {
weight: "وزن",
pageNumber: "تعداد صفحات",
pageType: "نوع کاغذ",
bookNumber: "شماره شابک",
publisher: "انتشارات",
author: "نویسنده",
bookType: "قطع",
publishedYear: "سال انتشار",
};
const Table = ({ specifications }) => {
return (
<ul className="w-full">
{Object.keys(specifications).map((specification, index) => (
<li className="flex my-3">
<div
className="bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm"
style={{ flex: 2 }}
>
{persian[specification]}
</div>
<div className="bg-grayF9 rounded p-3 text-sm" style={{ flex: 8 }}>
{specifications[specification]}
</div>
</li>
))}
</ul>
);
};
export default Table;
Table.defaultProps = {
specifications: {
weight: "1 کیلوگرم",
pageNumber: "400 صفحه",
pageType: "گلاسه",
bookNumber: "124900985340561870112312499",
publisher: "رزمندگان",
author: "یک نویسنده گمنام",
bookType: "خشتی",
publishedYear: "1399",
},
};

@ -10,8 +10,11 @@ import Comment from "../../Comment";
import Rate from "../../Rate";
import StarRating from "../../../../components/StarRating";
import AddToCartCard from "../../../../components/AddToCart";
import logo from '../../../../assets/images/user.png';
import ProductDescription from "../../../../components/ProductDescription";
import logo from "../../../../assets/images/user.png";
import ProductTab from "../../../../components/ProductTab";
import ProductImages from "../../../../components/ProductImage";
import ProductStatusCard from "../../../../components/ProductStatusCard";
import ProductSuggestions from "../../../../components/ProductSuggestion";
export const ProductOverAll = ({
productType,
@ -26,19 +29,11 @@ export const ProductOverAll = ({
}) => {
const [type, setType] = useState("physical");
return (
<div>
<header
className={`w-full flex justify-between`}
>
<img
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
alt=""
style={{ height: '420px' }}
className="-md py-8 px-16 bg-grayF4 mx-4"
/>
<div className="flex flex-col flex-1 ">
<div className="flex flex-col pr-2 py-2 border-0 border-b border-solid border-gray-100">
<div className="w-full">
<header className={`w-full flex flex-row justify-between gap-5`}>
<ProductImages />
<div className="flex flex-col w-1/2 divide-y divide-solid divide-gray-200">
<div className="w-full flex flex-col pr-2 py-2 border-0">
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{type === "digital"
? book?.product[0]?.name
@ -47,7 +42,7 @@ export const ProductOverAll = ({
<div className="text-blueC0 text-xs dark:text-greenBA">
{"پایه" + " " + grades[book?.gradeId]}
</div>
<div className="flex float-left justify-end">
<div className="flex justify-end">
<div className="p-2">
<StarRating />
</div>
@ -56,191 +51,86 @@ export const ProductOverAll = ({
</div>
</div>
</div>
<div className="py-4 border-0 border-b border-solid border-gray-100">
<div className="flex items-center py-2">
<h1>نوع کتاب</h1>
<p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
<div className="py-4">
<div className="w-full flex items-center pb-2">
<h1 className="text-base font-bold">نوع کتاب</h1>
<p className=" text-xs px-4 text-blueE8">
به من کمک کن انتخاب کنم
</p>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<div className="w-full flex flex-row justify-between items-center mt-4 gap-5">
<Button
title="نسخه فیزیکی"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "1px",
}}
width="38%"
color={isDark ? "text-white" : "text-blueC0"}
active={type === "physical"}
selectable={true}
onClick={() => setType("physical")}
borderType='dashed'
customStyle=''
twPaddings='py-4 px-12'
borderType="dashed"
customStyle=""
twPaddings="py-4 px-12"
radius={false}
/>
<Button
title="نسخه دیجیتال"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "1px",
}}
width="38%"
selectable={true}
active={type === "digital"}
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => setType("digital")}
radius={false}
twPaddings='py-4 px-12'
twPaddings="py-4 px-12"
/>
<Button
title="مشاهده نمونه"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
border={{
color: isDark ? "#ffffff55" : "#C01919",
width: "1px",
}}
width="24%"
radius={false}
twPaddings='py-4 px-6'
twPaddings="py-4 px-6"
color={isDark ? "text-white" : "text-red19"}
/>
</div>
</div>
<div className="flex justify-center py-6">
<div className="flex py-4">
<Button
title="مشاهده دوره ویدیویی این محصول >"
backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "2px" }}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "2px",
}}
color={isDark ? "text-white" : "text-blue52"}
selectable={true}
onClick={() => setType("physical")}
customStyle='bg-black bg-opacity-10'
twPaddings='py-4 px-32'
customStyle="bg-black bg-opacity-10"
twPaddings="py-4 px-32"
radius={false}
/>
/>
</div>
</div>
<div>
<AddToCartCard
price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price}
sendingTime={20}
numberOfSuggest={160}
profit={12000}
// showProduct
productCat={grades[book?.gradeId]}
productImg={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
productName={type === "digital"
? book?.product[0]?.name
: book?.product[1]?.name}
button={
<Button
onClick={() =>
proxy.status()
? pushToCart({
productId:
type === "digital"
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
title='افزودن به سبد خرید'
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
twPaddings='py-4'
/>
}
footer='SendBack'
/>
<div className="flex flex-col w-1/4">
<ProductStatusCard />
</div>
</header>
<ProductDescription
addToCart={
<AddToCartCard
price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price}
sendingTime={20}
numberOfSuggest={160}
profit={12000}
showProduct
productCat={grades[book?.gradeId]}
productImg={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
productName={type === "digital"
? book?.product[0]?.name
: book?.product[1]?.name}
button={
<Button
onClick={() =>
proxy.status()
? pushToCart({
productId:
type === "digital"
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
title='افزودن به سبد خرید'
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
twPaddings='py-4'
/>
}
// footer='SendBack'
/>
}
/>
<ul
className="list-none flex flex-row divide-x items-center mt-4"
style={{ direction: "ltr" }}
>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.pagesNum} <br /> صفحه
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{"فیزیکی - دیجیتالی"} <br /> در دسترس
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.rate} <br /> امتیاز
</li>
</ul>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
title="مشاهده دوره ویدئویی این محصول"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
bgOpacity="bg-opacity-10"
width="100%"
color={isDark ? "text-white" : "text-blueC0"}
/>
</div>
<div className="w-full flex flex-col justify-between items-center mt-4">
<Header title="توضیحات" link="#" />
<p className="text-xs text-gray1 mt-2 dark:text-white">
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ
ﺩﺯﺩﯼ ﻧﮑﻦ ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ
ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ
ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ
ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ
ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ
ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
</p>
</div>
<ProductTab />
<ProductSuggestions />
</div>
)
}
);
};
const mapStateToProps = (state) => ({
book: state.book.info,

@ -3,7 +3,7 @@ import ProductOverAll from "./ProductOverAll";
const DesktopProductLayout = () =>{
return (
<div className="w-4/5 flex flex-row gap-10 px-5 overflow-y-hidden mt-3 mb-64">
<div className="w-11/12 flex flex-row overflow-y-hidden mt-3 mb-64">
<ProductOverAll />
</div>
);

Loading…
Cancel
Save