Reza_ashrafi
3 years ago
parent
66fda6c014
commit
1b0086e570
22 changed files with 610 additions and 346 deletions
@ -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 */ |
||||
} |
||||
|
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