update

src/App.js

@@ -14,17 +14,17 @@ import BlogDesign6 from "./components/Blogs/design6/BlogDesign6";
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
-      <BookDesign />
-      <ButtonDesign />
-      <ProductTags />
+      {/* <ProductDesign /> */}
+      {/* <BookDesign /> */}
+      {/* <ButtonDesign /> */}
+      {/* <ProductTags /> */}
       <CounterDesign />
-      <BlogDesign1 />
-      <BlogDesign2 />
-      <BlogDesign3 />
-      <BlogDesign4 />
-      <BlogDesign5 />
-      <BlogDesign6 />
+      {/* <BlogDesign1 /> */}
+      {/* <BlogDesign2 /> */}
+      {/* <BlogDesign3 /> */}
+      {/* <BlogDesign4 /> */}
+      {/* <BlogDesign5 /> */}
+      {/* <BlogDesign6 /> */}
     </div>
   );
 }

src/components/counterDesign/CounterDesign.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import "./CounterDesign.scss";
 
 import blackDisLikeIcon from "../../assets/icons/black-dislike-icon.svg";
@@ -16,6 +16,8 @@ const CounterDesign = ({
   counterDecreaseBtn,
   likeBtn,
 }) => {
+  const [count, setCount] = useState(0);
+
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       <div className="flex items-center justify-between mb-6">
@@ -35,20 +37,40 @@ const CounterDesign = ({
       <div className="flex flex-col items-center justify-center">
         {likeBtn && (
           <div className="flex items-center">
-            <img src={blackLikeIcon} alt="" className="w-8 mb-4" />
-            <img src={blackDisLikeIcon} alt="" className="w-8 mb-4" />
+            <img
+              src={blackLikeIcon}
+              alt=""
+              className="w-8 mb-4"
+              onClick={() => setCount(count + 1)}
+            />
+            <img
+              src={blackDisLikeIcon}
+              alt=""
+              className="w-8 mb-4"
+              onClick={() => setCount(count - 1)}
+            />
           </div>
         )}
         {counterIncreaseBtn && (
-          <img src={incrementCounterIcon} alt="" className="w-8 mb-4" />
+          <img
+            src={incrementCounterIcon}
+            alt=""
+            className="w-8 mb-4"
+            onClick={() => setCount(count + 1)}
+          />
         )}
         <p
           className={` text-sm sm:text-base md:text-2xl font-bold ${counterColor}  `}
         >
-          561
+          {count}{" "}
         </p>
         {counterDecreaseBtn && (
-          <img src={decrementCounterIcon} alt="" className="w-8 mt-4" />
+          <img
+            src={decrementCounterIcon}
+            alt=""
+            className="w-8 mt-4"
+            onClick={() => setCount(count - 1)}
+          />
         )}
       </div>
     </section>
@@ -65,6 +87,6 @@ CounterDesign.defaultProps = {
   counterColor: "text-darkRedTextColor",
   // for icons
   likeBtn: true,
-  counterIncreaseBtn: false,
-  counterDecreaseBtn: false,
+  counterIncreaseBtn: true,
+  counterDecreaseBtn: true,
 };