update

src/App.js

@@ -17,18 +17,18 @@ function App() {
   return (
     <div className="App">
       <ProductDesign />
-      <VodProductDesign />
-      <BookDesign />
-      <ButtonDesign />
-      <ProductTags />
-      <CounterDesign />
-      <BlogDesign1 />
-      <BlogDesign2 />
-      <BlogDesign3 />
-      <BlogDesign4 />
-      <BlogDesign5 />
-      <BlogDesign6 />
-      <HeaderDesign1 />
+      {/* <VodProductDesign /> */}
+      {/* <BookDesign /> */}
+      {/* <ButtonDesign /> */}
+      {/* <ProductTags /> */}
+      {/* <CounterDesign /> */}
+      {/* <BlogDesign1 /> */}
+      {/* <BlogDesign2 /> */}
+      {/* <BlogDesign3 /> */}
+      {/* <BlogDesign4 /> */}
+      {/* <BlogDesign5 /> */}
+      {/* <BlogDesign6 /> */}
+      {/* <HeaderDesign1 /> */}
     </div>
   );
 }

src/components/productDesign/ProductDesign.js

@@ -30,7 +30,9 @@ const ProductDesign = ({
   productHolderBorder,
   productHolderBorderColor,
   productTitleColor,
+  productExcerptTextColor,
   productCat,
+  productCatTextColor,
   rangeHolder,
   verticalImg,
   horizontalImg,
@@ -82,27 +84,29 @@ const ProductDesign = ({
           <div
             className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
           >
+            {/* product image */}
             <div className="w-full relative">
+              {/* icons on image */}
               <div className="absolute left-2 top-2">
                 {discountPricePercent && (
-                  <div className="bg-discountPriceBg rounded-md px-2 py-2">
+                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
                     <p className="text-discountPriceTitle font-bold text-xs">
                       23<span>%</span>
                     </p>
                   </div>
                 )}
                 {likeBtn && (
-                  <div className="bg-likeBtnBg rounded-md py-1 flex justify-center">
+                  <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2">
                     <img src={heart} alt="" className="w-5" />
                   </div>
                 )}
                 {discount && (
-                  <div className="absolute rounded-md">
+                  <div className="absolute rounded-md mt-2">
                     <img src={discountImg} alt="" className="w-full" />
                   </div>
                 )}
               </div>
-              {/* img Holder */}
+              {/* img */}
               <div className="flex-shrink-0">
                 {verticalImg && (
                   <img src={book} alt="" className="w-full rounded-lg" />
@@ -118,52 +122,56 @@ const ProductDesign = ({
                     src={YellowDotIcon}
                     alt=""
                     data-tip="زرد"
-                    className="w-3 h-3 ml-1"
+                    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"
+                    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"
+                    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"
+                    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={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
+                  className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`}
                 >
                   نسخه چاپی علموم تجربه هفتم
                 </h2>
                 {productContent && (
-                  <p className="text-justify text-productContent mt-2 text-xs leading-6">
+                  <p
+                    className={`text-justify mt-2 text-sm leading-6 ${productExcerptTextColor}`}
+                  >
                     این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
                     خوب دیگری نیز دارد.
                   </p>
                 )}
                 {productCat && (
-                  <span className="text-darkCrimsonTextColor text-xs font-light">
+                  <span className={`text-xs font-light ${productCatTextColor}`}>
                     پایه سوم
                   </span>
                 )}
               </div>
+              {/* star */}
               {star && (
                 <div className="flex items-center mt-2">
                   <StarRating />
@@ -172,11 +180,11 @@ const ProductDesign = ({
                   </span>
                 </div>
               )}
+              {/* price */}
               {priceHolder && (
                 <div
                   className={`flex items-center justify-between ${priceDirection}`}
                 >
-                  {/* price */}
                   <div className="mt-2">
                     <div
                       className={`${
@@ -186,6 +194,7 @@ const ProductDesign = ({
                       <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>
@@ -240,16 +249,25 @@ export default ProductDesign;
 // 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
   colors: true,
   likeBtn: true,
   discount: true,
   discountPricePercent: true,
+  // product price
   discountPrice: true,
+  priceHolder: true,
+
   productContent: true,
   star: true,
   productTags: true,
-  priceHolder: true,
   productCat: true,
   rangeHolder: true,
 
@@ -257,8 +275,11 @@ ProductDesign.defaultProps = {
   verticalImg: true,
   horizontalImg: false,
 
-  productTitleColor: "text-darkCrimsonTextColor",
+  productTitleColor: "text-productTitle",
 
+  productExcerptTextColor: "text-productContent",
+
+  productCatTextColor: "text-darkCrimsonTextColor",
   // برای درصد دادن به عرض رنج
   rangeWidth: "w-44",
   //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
@@ -269,5 +290,3 @@ ProductDesign.defaultProps = {
   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
   priceDirection: "flex-row",
 };
-
-// border-2 border-productDesignBorderColor