Merge branch 'master' of https://git.sitenevis.com/Reza_ashrafi/NewDanovin
commit
313c9b9ae6
21 changed files with 610 additions and 235 deletions
@ -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; |
||||
@ -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 */ |
||||
} |
||||
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
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 ", |
||||
}; |
||||
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 864 B |
|
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, |
||||
}, |
||||
], |
||||
}; |
||||
|
After Width: | Height: | Size: 277 B |
|
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", |
||||
}, |
||||
}; |
||||
Loading…
Reference in new issue