Exam And Find School Components Made

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="w-full flex justify-center">
-        <div className="h-full w-60 pl-4">
+      <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>
+          <h1 className="font-bold text-red52 border-b border-red82OP p-2 ">دبیرستان غیر انتفاعی مدرسان هوشمند</h1>
-          <p className="font-bold text-sm text-red26 border-b border-red82OP py-2">تهران خیابان انقلاب اسلامی حدفاصل ابوریحان و فلسطین پلاک2 </p>
+          <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 ">
+            <div className={`${isMobile ? 'text-xs ' : 'border-l text-sm'}  font-bold flex justify-center w-1/2 text-red26 border-red82OP p-2 `}>
-             <p> آدرس وبسایت : www.google.com</p>
+             <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 ${isMobile && 'flex-col'}`}>
-          <div className="flex">
+            {isMobile && <h1 className="text-red52 text-sm font-bold p-2 pb-0">امکانات  </h1>}
-            <div className="w-3/5 flex flex-wrap pb-6 border-l border-red82OP">
+            <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={`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={`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={`${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">
+            <div className={`flex px-4 ${isMobile ? 'w-full border-red82OP border-t' : 'w-2/5 py-4'} justify-between items-center`}>
-          <h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
+          <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`}
+      <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: '375px', direction: 'rtl' }}
+      style={{ width: !isMobile && '375px', direction: 'rtl' }}
 
     >