Merge branch 'master' of https://git.sitenevis.com/Reza_ashrafi/NewDanovin
commit
313c9b9ae6
21 changed files with 610 additions and 235 deletions
@ -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