|
|
|
|
import React, { useState } from "react";
|
|
|
|
|
import { BsExclamationSquareFill } from "react-icons/bs";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ProductDesign = ({
|
|
|
|
|
colors,
|
|
|
|
|
likeBtn,
|
|
|
|
|
discount,
|
|
|
|
|
discountPricePercent,
|
|
|
|
|
discountPrice,
|
|
|
|
|
productContent,
|
|
|
|
|
star,
|
|
|
|
|
productTags,
|
|
|
|
|
priceDirection,
|
|
|
|
|
productTitleAlignment,
|
|
|
|
|
priceHolder,
|
|
|
|
|
productHolderBorder,
|
|
|
|
|
productHolderBorderColor,
|
|
|
|
|
productTitleColor,
|
|
|
|
|
productExcerptTextColor,
|
|
|
|
|
productCat,
|
|
|
|
|
productCatTextColor,
|
|
|
|
|
rangeHolder,
|
|
|
|
|
verticalImg,
|
|
|
|
|
horizontalImg,
|
|
|
|
|
rangeWidth,
|
|
|
|
|
addToCartHolder,
|
|
|
|
|
productName,
|
|
|
|
|
productPrice,
|
|
|
|
|
productImg,
|
|
|
|
|
writeGHEIMAT,
|
|
|
|
|
numberOfRegards,
|
|
|
|
|
productHolderHoverBorder,
|
|
|
|
|
hoverMode,
|
|
|
|
|
teacher,
|
|
|
|
|
btnOnClick,
|
|
|
|
|
catId
|
|
|
|
|
}) => {
|
|
|
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const emkanat = [
|
|
|
|
|
{
|
|
|
|
|
title: 'دستشویی',
|
|
|
|
|
isActive: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'آب خوری',
|
|
|
|
|
isActive: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'تخته هوشمند',
|
|
|
|
|
isActive: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'کامپیوتر',
|
|
|
|
|
isActive: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'کتابخانه',
|
|
|
|
|
isActive: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'مشاوره تحصیلی',
|
|
|
|
|
isActive: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'آزمایشگاه',
|
|
|
|
|
isActive: false,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (catId == 1) {
|
|
|
|
|
return (
|
|
|
|
|
<div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
|
|
|
|
|
style={{ width: '375px', direction: 'rtl' }}
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<div className="border-b border-red82OP pb-2 px-4">
|
|
|
|
|
<h1 className="text-red52 text-lg font-bold">{productName}</h1>
|
|
|
|
|
<p className="text-red26 text-sm my-2">
|
|
|
|
|
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex border-b border-red82OP px-4 py-2">
|
|
|
|
|
<div>
|
|
|
|
|
<h1 className="font-bold text-red26">
|
|
|
|
|
استاد : {teacher}
|
|
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex border-b border-red82OP px-4 py-2 text-red26">
|
|
|
|
|
<h1>نوع گروه : A</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex p-4 justify-between items-center">
|
|
|
|
|
<h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
|
|
|
|
|
<div
|
|
|
|
|
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
|
|
|
|
|
`}
|
|
|
|
|
>
|
|
|
|
|
<button onClick={btnOnClick}>افزودن به سبد خرید</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
if (catId == 2) {
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex p-6 pl-0 pb-0 border border-red82OP my-4 rounded-lg" style={{width: '90%' , marginRight: '5%'}}>
|
|
|
|
|
<div className="h-full w-60 pl-4">
|
|
|
|
|
{/* image */}
|
|
|
|
|
<img src="https://fa.tripyar.com/uploads/picture/2977/2.jpg" className="h-full rounded-md" />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-col text-right">
|
|
|
|
|
<h1 className="font-bold text-red52 border-b border-red82OP pb-2">دبیرستان غیر انتفاعی مدرسان هوشمند</h1>
|
|
|
|
|
<p className="font-bold text-sm text-red26 border-b border-red82OP py-2">تهران خیابان انقلاب اسلامی حدفاصل ابوریحان و فلسطین پلاک2 </p>
|
|
|
|
|
<div className="flex justify-between border-b border-red82OP ">
|
|
|
|
|
<div className="border-l text-sm font-bold text-red26 border-red82OP p-2 pr-0">
|
|
|
|
|
شماره تلفن: ۰۲۱۶۶۴۵۶۷۳۸
|
|
|
|
|
</div>
|
|
|
|
|
<div className="border-l text-sm font-bold text-red26 border-red82OP p-2 px-4 text-center">
|
|
|
|
|
آدرس وبسایت : www.google.com
|
|
|
|
|
</div>
|
|
|
|
|
<div className="text-sm font-bold text-red26 p-2 px-4 text-center">
|
|
|
|
|
آدرس بروی نقشه
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex">
|
|
|
|
|
<div className="w-3/5 flex flex-wrap pb-6 border-l border-red82OP">
|
|
|
|
|
امکانات :
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
emkanat.map((item, index) => (
|
|
|
|
|
<div className="flex justify-center items-center p-1 px-2">
|
|
|
|
|
<div className={`w-6 h-6 mx-1 text-white text-sm rounded-full flex justify-center items-center ${item.isActive ? 'bg-green17' : 'bg-gray-200'}`}>
|
|
|
|
|
|
|
|
|
|
<svg width="37" height="37" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<p>{item.title}</p>
|
|
|
|
|
</div>
|
|
|
|
|
))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex p-4 w-2/5 justify-between items-center">
|
|
|
|
|
<h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
|
|
|
|
|
<div
|
|
|
|
|
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
|
|
|
|
|
`}
|
|
|
|
|
>
|
|
|
|
|
<button onClick={btnOnClick}> رزرو پیش ثبت نام </button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
if(catId == 3){
|
|
|
|
|
return(
|
|
|
|
|
<div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
|
|
|
|
|
style={{ width: '375px', direction: 'rtl' }}
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<div className="border-b border-red82OP pb-2 px-4">
|
|
|
|
|
<h1 className="text-red52 text-lg font-bold">{productName}</h1>
|
|
|
|
|
<p className="text-red26 text-sm my-2">
|
|
|
|
|
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex border-b border-red82OP px-4 py-2">
|
|
|
|
|
<div>
|
|
|
|
|
<h1 className="font-bold text-red26">
|
|
|
|
|
استاد : {teacher}
|
|
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex border-b border-red82OP px-4 py-2 text-red26">
|
|
|
|
|
<h1>نوع گروه : A</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex p-4 justify-between items-center">
|
|
|
|
|
<h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
|
|
|
|
|
<div
|
|
|
|
|
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
|
|
|
|
|
`}
|
|
|
|
|
>
|
|
|
|
|
<button onClick={btnOnClick}>افزودن به سبد خرید</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
return <div></div>
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ProductDesign;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ProductDesign.defaultProps = {
|
|
|
|
|
// icons on product image
|
|
|
|
|
colors: false,
|
|
|
|
|
likeBtn: false,
|
|
|
|
|
discount: false,
|
|
|
|
|
discountPricePercent: false,
|
|
|
|
|
// product price
|
|
|
|
|
discountPrice: false,
|
|
|
|
|
priceHolder: true,
|
|
|
|
|
|
|
|
|
|
productContent: false,
|
|
|
|
|
star: true,
|
|
|
|
|
productTags: [],
|
|
|
|
|
productCat: true,
|
|
|
|
|
rangeHolder: true,
|
|
|
|
|
|
|
|
|
|
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
|
|
|
|
|
verticalImg: true,
|
|
|
|
|
horizontalImg: false,
|
|
|
|
|
|
|
|
|
|
addToCartHolder: false,
|
|
|
|
|
|
|
|
|
|
productTitleColor: "text-productTitle",
|
|
|
|
|
|
|
|
|
|
productExcerptTextColor: "text-productContent",
|
|
|
|
|
|
|
|
|
|
productCatTextColor: "text-darkCrimsonTextColor",
|
|
|
|
|
// برای درصد دادن به عرض رنج
|
|
|
|
|
rangeWidth: "w-44",
|
|
|
|
|
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
|
|
|
|
|
productHolderBorder: "border",
|
|
|
|
|
productHolderBorderColor: "border-grayBorderColor",
|
|
|
|
|
|
|
|
|
|
productTitleAlignment: "text-justify",
|
|
|
|
|
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
|
|
|
|
|
priceDirection: "flex-row",
|
|
|
|
|
// productImg: book,
|
|
|
|
|
writeGHEIMAT: false
|
|
|
|
|
};
|