|
|
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 text-center"> |
|
|
<div className="w-1/2 border-l border-red82OP py-2 "> |
|
|
<h1 className="font-bold text-red26"> |
|
|
نوع آزمون : آنلاین |
|
|
</h1> |
|
|
</div> |
|
|
<div className="w-1/2 py-2 "> |
|
|
<h1 className="font-bold text-red26"> |
|
|
بودجه بندی آزمون |
|
|
</h1> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<div className="flex border-b border-red82OP text-center text-xs"> |
|
|
<div className="w-1/2 border-l border-red82OP py-2 "> |
|
|
<h1 className="font-bold text-red26"> |
|
|
تاریخ برگزاری : 1400/02/13 |
|
|
</h1> |
|
|
</div> |
|
|
<div className="w-1/2 py-2 "> |
|
|
<h1 className="font-bold text-red26"> |
|
|
تعداد آزمون : 18 |
|
|
</h1> |
|
|
</div> |
|
|
|
|
|
</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 |
|
|
};
|
|
|
|