Exam And Find School Components Made

main
Pedram Keshavarzi 3 years ago
parent 354be7c8fc
commit 78e420da34
  1. 50
      src/components/Product/index.js

@ -120,33 +120,39 @@ const ProductDesign = ({
}
if (catId == 2) {
return (
<div className="flex p-6 pl-0 pb-0 border border-red82OP my-4 rounded-lg" style={{width: '90%' }}>
<div className="h-full w-60 pl-4">
<div className="w-full flex justify-center">
<div className={`flex ${isMobile ? 'flex-col w-11/12 border-red52' : 'border-red82OP pt-4'} border my-4 rounded-lg `} style={{width: !isMobile && '90%' }}>
<div className={` ${isMobile ? 'w-full h-24 ' : 'w-60 p-4 flex items-center justify-center' }`}>
{/* image */}
<img src="https://fa.tripyar.com/uploads/picture/2977/2.jpg" className="h-full rounded-md" />
<img src="https://fa.tripyar.com/uploads/picture/2977/2.jpg" className={` rounded-md ${isMobile ? 'rounded-b-none w-full h-full object-none' : ' bg-green-500'} `} />
</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>
<h1 className="font-bold text-red52 border-b border-red82OP p-2 ">دبیرستان غیر انتفاعی مدرسان هوشمند</h1>
<p className={`font-bold ${isMobile ? 'text-xs text-center' : '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 w-1/4">
<div className={`border-l font-bold text-red26 ${isMobile ? 'flex justify-center items-center w-1/2 text-xs' : ' w-1/4 p-2 pr-0 text-sm'} border-red82OP `}>
شماره تلفن: ۰۲۱۶۶۴۵۶۷۳۸
</div>
<div className="border-l text-sm font-bold flex justify-center w-1/2 text-red26 border-red82OP p-2 ">
<p> آدرس وبسایت : www.google.com</p>
<div className={`${isMobile ? 'text-xs ' : 'border-l text-sm'} font-bold flex justify-center w-1/2 text-red26 border-red82OP p-2 `}>
<p>
{!isMobile && ' آدرس وبسایت : '}
www.google.com</p>
</div>
<div className="text-sm font-bold text-red26 p-2 w-1/4 px-4 text-center">
{!isMobile && <div className="text-sm font-bold text-red26 p-2 w-1/4 text-center">
آدرس بروی نقشه
</div>}
</div>
</div>
<div className="flex">
<div className="w-3/5 flex flex-wrap pb-6 border-l border-red82OP">
امکانات :
<div className={`flex ${isMobile && 'flex-col'}`}>
{isMobile && <h1 className="text-red52 text-sm font-bold p-2 pb-0">امکانات </h1>}
<div className={`w-${isMobile? 'full' : '3/5 pb-6'} flex flex-wrap border-l border-red82OP`}>
{!isMobile && 'امکانات :'}
{
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'}`}>
<div className={`flex ${isMobile ? 'w-1/2 justify-start text-xs font-bold' : 'justify-center text-sm'} items-center p-1 px-2`} key={`SCHOOL_SPE__${index}`}>
<div className={`${isMobile ? 'w-4 h-4' : 'w-6 h-6'} text-white ml-1 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" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@ -158,10 +164,13 @@ const ProductDesign = ({
</div>
))
}
{isMobile &&
<div className="w-full border-t border-red82OP flex items-center justify-center h-16">
<h1 className="font-black text-sm text-red26 ">مشاهده آدرس بروی نقشه</h1>
</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={`flex px-4 ${isMobile ? 'w-full border-red82OP border-t' : 'w-2/5 py-4'} justify-between items-center`}>
<h1 className={`${isMobile && 'w-1/2 h-full flex items-center py-4 border-l border-red82OP'} 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
`}
@ -175,12 +184,13 @@ const ProductDesign = ({
</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={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
style={{ width: !isMobile && '375px', direction: 'rtl' }}
>

Loading…
Cancel
Save