update

src/App.js

@@ -16,12 +16,12 @@ import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
-      <VodProductDesign />
+      {/* <ProductDesign /> */}
+      {/* <VodProductDesign /> */}
       {/* <BookDesign /> */}
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
-      {/* <CounterDesign /> */}
+      <CounterDesign />
       {/* <BlogDesign1 /> */}
       {/* <BlogDesign2 /> */}
       {/* <BlogDesign3 /> */}

src/components/bookDesign/BookDesign.js

@@ -28,7 +28,7 @@ export const BookDesign = ({ bookBackCoverBg }) => {
           <img
             src={book}
             alt=""
-            className="rounded-md z-40 transform -translate-x-3 w-full sm:w-72 h-full"
+            className="rounded-md z-40 transform -translate-x-4 w-full sm:w-72 h-full"
           />
           <img src={bookCover} alt="" className="z-30 h-full" />
           <div

src/components/counterDesign/CounterDesign.js

@@ -34,19 +34,20 @@ const CounterDesign = ({
           است.
         </p>
       </div>
+      {/* counter design */}
       <div className="flex flex-col items-center justify-center">
         {likeBtn && (
           <div className="flex items-center">
             <img
               src={blackLikeIcon}
               alt=""
-              className="w-8 mb-4"
+              className="w-8 mb-4 cursor-pointer pointer transition delay-150 duration-300 ease-in-out hover:-translate-y-2"
               onClick={() => setCount(count + 1)}
             />
             <img
               src={blackDisLikeIcon}
               alt=""
-              className="w-8 mb-4"
+              className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:translate-y-2"
               onClick={() => setCount(count - 1)}
             />
           </div>
@@ -55,20 +56,21 @@ const CounterDesign = ({
           <img
             src={incrementCounterIcon}
             alt=""
-            className="w-8 mb-4"
+            className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:-translate-y-2"
             onClick={() => setCount(count + 1)}
           />
         )}
         <p
-          className={` text-sm sm:text-base md:text-2xl font-bold ${counterColor}  `}
+          className={`text-sm sm:text-base md:text-2xl font-bold text-counterColor`}
+          style={count > 0 ? { color: "green" } : { color: "red" }}
         >
-          {count}{" "}
+          {count}
         </p>
         {counterDecreaseBtn && (
           <img
             src={decrementCounterIcon}
             alt=""
-            className="w-8 mt-4"
+            className="w-8 mt-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:translate-y-2"
             onClick={() => setCount(count - 1)}
           />
         )}

src/components/productDesign/ProductDesign.js

@@ -32,6 +32,7 @@ const ProductDesign = ({
   rangeHolder,
   verticalImg,
   horizontalImg,
+  rangeWidth,
 }) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -109,10 +110,10 @@ const ProductDesign = ({
               {/* select Color */}
               {colors && (
                 <div className="flex items-center absolute right-2 bottom-2">
-                  <img src={YellowDotIcon} alt="" className="w-3 h-3" />
-                  <img src={RedDotIcon} alt="" className="w-3 h-3" />
-                  <img src={PurpleDotIcon} alt="" className="w-3 h-3" />
-                  <img src={LightBlueDotIcon} alt="" className="w-3 h-3" />
+                  <img src={YellowDotIcon} alt="" className="w-3 h-3 ml-1" />
+                  <img src={RedDotIcon} alt="" className="w-3 h-3 ml-1" />
+                  <img src={PurpleDotIcon} alt="" className="w-3 h-3 ml-1" />
+                  <img src={LightBlueDotIcon} alt="" className="w-3 h-3 ml-1" />
                 </div>
               )}
             </div>
@@ -169,7 +170,7 @@ const ProductDesign = ({
                   </div>
                   {/* add to cart */}
                   <button
-                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
+                    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" : ""
                     }`}
                   >
@@ -192,7 +193,9 @@ const ProductDesign = ({
               )}
               {rangeHolder && (
                 <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
-                  <div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
+                  <div
+                    className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
+                  ></div>
                 </div>
               )}
             </div>
@@ -221,13 +224,21 @@ ProductDesign.defaultProps = {
   priceHolder: true,
   productCat: true,
   rangeHolder: true,
+
+  // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
   verticalImg: true,
   horizontalImg: false,
+
   productTitleColor: "text-darkCrimsonTextColor",
+
+  // برای درصد دادن به عرض رنج
+  rangeWidth: "w-44",
+  //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
   productHolderBorder: "border",
   productHolderBorderColor: "border-grayBorderColor",
-  productTitleAlignment: "text-justify",
 
+  productTitleAlignment: "text-justify",
+  //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
   priceDirection: "flex-row",
 };
 

src/components/starRating/StarRating.js

@@ -17,7 +17,7 @@ const StarRating = () => {
             onMouseEnter={() => setHover(index)}
             onMouseLeave={() => setHover(rating)}
           >
-            <span className="star">&#9733;</span>
+            <span className="star text-lg">&#9733;</span>
           </button>
         );
       })}

src/components/vodProductDesign/VodProductDesign.js

@@ -32,6 +32,9 @@ const VodProductDesign = ({
   productTitleColor,
   productCat,
   rangeHolder,
+  priceTitle,
+  productPriceAmountTitle,
+  addToCartHolder,
   verticalImg,
   horizontalImg,
 }) => {
@@ -55,6 +58,7 @@ const VodProductDesign = ({
           <div
             className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
           >
+            {/* img */}
             <div
               className="w-full relative flex items-center justify-center cursor-pointer"
               style={{
@@ -79,7 +83,8 @@ const VodProductDesign = ({
               )}
             </div>
             <div className="px-2">
-              <div className="mt-4">
+              {/* content */}
+              <div className="mt-4 flex justify-between items-center">
                 <h2
                   className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
                 >
@@ -97,48 +102,59 @@ const VodProductDesign = ({
                   </span>
                 )}
               </div>
-              {star && (
-                <div className="flex items-center mt-2">
-                  <StarRating />
-                  <span className="text-xs text-productContent font-bold mr-2">
-                    39
-                  </span>
-                </div>
-              )}
-              {priceHolder && (
-                <div
-                  className={`flex items-center justify-between ${priceDirection}`}
-                >
-                  {/* price */}
-                  <div className="mt-2">
-                    <div
-                      className={`${
-                        priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                      }`}
-                    >
-                      <span className="text-xs text-borderColor ml-2">
-                        قیمت
-                      </span>
-                      {discountPrice && (
-                        <p className="line-through text-xs text-borderColor mr-2">
-                          145<span>تومان</span>
-                        </p>
-                      )}
+              {/* price */}
+              <div className="flex items-center justify-between mt-2">
+                {priceHolder && (
+                  <div
+                    className={`flex items-center justify-between ${priceDirection}`}
+                  >
+                    {/* price */}
+                    <div className="mt-2">
+                      <div
+                        className={`${
+                          priceDirection.indexOf("col") !== -1
+                            ? "inline"
+                            : "flex"
+                        }`}
+                      >
+                        {priceTitle && (
+                          <span className="text-xs text-borderColor ml-2">
+                            قیمت
+                          </span>
+                        )}
+                        {discountPrice && (
+                          <p className="line-through text-xs text-borderColor mr-2">
+                            145<span>تومان</span>
+                          </p>
+                        )}
+                      </div>
+                      <p
+                        className={`text-sm font-semibold inline ${productPriceAmountTitle}`}
+                      >
+                        145.000<span>تومان</span>
+                      </p>
                     </div>
-                    <p className="text-sm text-productPrice font-semibold inline">
-                      145.000<span>تومان</span>
-                    </p>
+                    {/* add to cart */}
+                    {addToCartHolder && (
+                      <button
+                        className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2  ${
+                          priceDirection.indexOf("col") !== -1 ? "w-full" : ""
+                        }`}
+                      >
+                        اضافه کردن به سبد خرید
+                      </button>
+                    )}
                   </div>
-                  {/* add to cart */}
-                  <button
-                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
-                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                    }`}
-                  >
-                    اضافه کردن به سبد خرید
-                  </button>
-                </div>
-              )}
+                )}
+                {star && (
+                  <div className="flex items-center mt-2">
+                    <StarRating />
+                    <span className="text-xs text-productContent font-bold mr-2">
+                      39
+                    </span>
+                  </div>
+                )}
+              </div>
               {productTags && (
                 <div className="mt-2 flex flex-wrap">
                   <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
@@ -153,7 +169,7 @@ const VodProductDesign = ({
                 </div>
               )}
               {rangeHolder && (
-                <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
+                <div className="bg-rangeBgColor h-3 w-full rounded mt-4">
                   <div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
                 </div>
               )}
@@ -167,6 +183,9 @@ const VodProductDesign = ({
 
 export default VodProductDesign;
 
+// text colors i used:
+// text-productPrice
+
 VodProductDesign.defaultProps = {
   colors: false,
   likeBtn: false,
@@ -174,15 +193,19 @@ VodProductDesign.defaultProps = {
   discountPricePercent: false,
   discountPrice: false,
   productContent: false,
-  star: false,
+  star: true,
   productTags: false,
-  priceHolder: false,
+  priceHolder: true,
+  priceTitle: false,
   productCat: true,
   rangeHolder: true,
   verticalImg: false,
   horizontalImg: true,
+  addToCartHolder: false,
+
   productTitleColor: "text-darkCrimsonTextColor",
-  productHolderBorder: "border-0",
+  productPriceAmountTitle: "text-productPrice",
+  productHolderBorder: "border",
   productHolderBorderColor: "border-grayBorderColor",
   productTitleAlignment: "text-justify",