You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

285 lines
8.4 KiB

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
};