Product Component Made

src/components/Product/index.js

@@ -1,16 +1,6 @@
 import React, { useState } from "react";
 
-// import Tag from "../Tag";
-// import ReactTooltip from "react-tooltip";
 
-import book from "./goldon.png";
-import watermelon from "./watermelon.png";
-import heart from "./vuesax-linear-heart.svg";
-import discountImg from "./discount.png";
-import YellowDotIcon from "./yellowDotIcon.svg";
-import RedDotIcon from "./redDotIcon.svg";
-import PurpleDotIcon from "./purpleDotIcon.svg";
-import LightBlueDotIcon from "./lightBlueDotIcon.svg";
 
 
 const ProductDesign = ({
@@ -43,197 +33,56 @@ const ProductDesign = ({
   numberOfRegards,
   productHolderHoverBorder,
   hoverMode,
-  big,
-  starRate
+  teacher
 }) => {
   const [isHovering, setIsHovering] = useState(false);
   return (
-    <div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm' : 'w-48 m-2'} `}
-    style={big ? {width: '300px'} : {}}
+    <div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
+    style={ {width: '400px', direction:'rtl'}}
     
     >
-      <div className="w-full flex flex-wrap items-center justify-around my-5 px-4" >
-        <div
-          className={`w-full sm:w-60 md:w-72 ${big ? '' : 'mx-5'} rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-grayF4' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder} hover:` }
-          onMouseEnter={() => setIsHovering(true)}
-          onMouseLeave={() => setIsHovering(false)}
-        >
-          {/* product image */}
-          <div className="w-full relative">
-            {/* icons on image */}
-            <div className="absolute left-0 top-10">
-              {discountPricePercent && (
-                <div className="bg-discountPriceBg bg-white w-full p-2 px-3">
-                  <p className="text-discountPriceTitle font-bold text-md text-blueC0">
-                    23<span>%</span>
+      
+        <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>
-              )}
-              {likeBtn && (
-                <div className="bg-likeBtnBg rounded-md flex justify-center my-2">
-                  <img src={heart} alt="" className="w-5" />
-                </div>
-              )}
-              {discount && (
-                <div className="rounded-md">
-                  <img src={discountImg} alt="" className="w-full" />
-                </div>
-              )}
-            </div>
-            {/* img */}
-            <div className={`w-full ${big ? 'h-60' : 'h-48'} flex bg-grayF4 p-0 justify-center rounded-lg`}>
-              {verticalImg && (
-                <img
-                  src={productImg}
-                  alt=""
-                  className="h-full rounded-lg cursor-pointer py-5"
 
-                />
-              )}
-              {horizontalImg && (
-                <img src={watermelon} alt="" className="w-full rounded-lg" />
-              )}
+        <div className="flex border-b border-red82OP px-4 py-2">
+            <div>
+              <h1 className="font-bold text-red26">
+                استاد : {teacher}
+              </h1>
             </div>
-            {/* select Color */}
-            {/* {colors && (
-              <div className="flex items-center absolute right-2 bottom-2">
-                <img
-                  src={YellowDotIcon}
-                  alt=""
-                  data-tip="زرد"
-                  className="w-3 h-3 ml-1 cursor-pointer"
-                />
-                <ReactTooltip place="top" type="dark" effect="float" />
-                <img
-                  src={RedDotIcon}
-                  alt=""
-                  data-tip="قرمز"
-                  className="w-3 h-3 ml-1 cursor-pointer"
-                />
-                <ReactTooltip place="top" type="dark" effect="float" />
-                <img
-                  src={PurpleDotIcon}
-                  alt=""
-                  data-tip="بنفش"
-                  className="w-3 h-3 ml-1 cursor-pointer"
-                />
-                <ReactTooltip place="top" type="dark" effect="float" />
-                <img
-                  src={LightBlueDotIcon}
-                  alt=""
-                  data-tip="آبی"
-                  className="w-3 h-3 ml-1 cursor-pointer"
-                />
-                <ReactTooltip place="top" type="dark" effect="float" />
-              </div>
-            )} */}
 
         </div>
-          {/* product content */}
-          <div className="px-2">
-            <div className="mt-4">
-              <h2
-                className={`leading-4 text-xl font-black py-2 ${productTitleColor} ${productTitleAlignment}`}
-              >
-                {productName}
-              </h2>
-              {productContent && (
-                <p
-                  className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
-                >
-                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
-                  دیگری نیز دارد.
-                </p>
-              )}
-              {productCat && (
-                <span className={`text-md py-1 font-light ${productCatTextColor}`}>
-                  {productCat}
-                </span>
-              )}
+        <div className="flex border-b border-red82OP px-4 py-2 text-red26">
+            <h1>نوع گروه : A</h1>
         </div>
-            {/* star */}
-            {/* price */}
-            {priceHolder && (
-              <div
-                className={`flex items-center justify-between ${priceDirection}`}
-              >
-                <div className="mt-2">
+         
+         <div className="flex p-4 justify-between items-center"> 
+              <h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
          <div
-                    className={`${priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                      }`}
+                className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center 
+                  `}
               >
-                    {writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>}
-                    {/* price with line on it */}
-                    {discountPrice && (
-                      <p className="line-through text-xs text-borderColor mr-2">
-                        145<span>تومان</span>
-                      </p>
-                    )}
-                  </div>
-                  <p className="text-xl text-productPrice font-semibold inline text-blue5F">
-                    {productPrice} <span>تومان</span>
-                  </p>
+                <button>افزودن به سبد خرید</button>
               </div>
-                {/* add to cart */}
-                {addToCartHolder && (
-                  <button
-                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                      }`}
-                  >
-                    اضافه کردن به سبد خرید
-                  </button>
-
-                )}
-
             
          </div>
             
-            )}
 
           
-            
-        {hoverMode == 'blue' ?<div className="w-full flex justify-center mt-4">
-              <div
-                className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${isHovering ? "" : "hidden"
-                  }`}
-              >
-                <button>افزودن به سبد خرید</button>
         </div>
-            </div> : null}
     
-            {/* {productTags && (
-              <div className="mt-2 flex flex-wrap">
-                {
-                  productTags.map((item, index) => <Tag title={item} key={index} />)
-                }
-              </div>
-            )} */}
-            {rangeHolder && (
-              <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
-                <div
-                  className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
-                ></div>
-              </div>
-            )}
     
-          </div>
-        </div>
-      </div>
-    </div>
   );
 };
 
 export default ProductDesign;
 
-// text colors i used for product title:
-// text-darkCrimsonTextColor
-// text-productTitle
-
-// text color i used for product excerpt:
-// text-productContent
 
-// text color i used for product cat:
-// text-darkCrimsonTextColor
 
 ProductDesign.defaultProps = {
   // icons on product image
@@ -271,6 +120,6 @@ ProductDesign.defaultProps = {
   productTitleAlignment: "text-justify",
   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
   priceDirection: "flex-row",
-  productImg: book,
+  // productImg: book,
   writeGHEIMAT: false
 };

src/view/services/index.js

@@ -38,28 +38,29 @@ const Services = ({ isMobile,
 
 
     return (
-        <div className="flex" style={{width: '93.5%', marginRight: '6.5%', marginTop: '8.5%'}}>
-            <button onClick={() => console.log(book)}>asdasd</button>
+        <div className="" style={{ width: '93.5%', marginRight: '6.5%', marginTop: '8.5%' }}>
+            <div>
                 {books?.map((product, index) => (
-            <Link to={"/products/" + product?.id}>
+                    <Link to={"/class/" + product?.id}>
                         <Product
                             key={index}
                             productsType={filter.productsType}
                             product={product}
                             index={Number(index)}
-                productName={`کتاب ${product?.name}`}
+                            productName={`${product?.name}`}
                             productCat={`پایه ${grades[product?.gradeId]}`}
                             productPrice={100000}
-                productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                            // productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
                             numberOfRegards={160}
-                
                             productHolderBorder=''
                             productHolderHoverBorder='shadow-md'
+                            teacher={product.vodTeacher}
 
                         />
                     </Link>
-          ))}
 
+                ))}
+            </div>
         </div>
     );
 };
@@ -80,4 +81,3 @@ const mapStateToProps = (state) => ({
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Services);
-  

tailwind.config.js

@@ -26,7 +26,9 @@ module.exports = {
         red26: '#521326',
         red52: '#df1452',
         red46OP: 'rgba(255, 246, 246, 0.8)',
-        grayEC: '#ececec'
+        grayEC: '#ececec',
+        red82OP: 'rgba(223, 20, 82, 0.08)',
+        pinkF5: '#fff1f5'
       },
     },
     screens: {