Added Number of Visits Count

components/common/Footer.js

@@ -7,9 +7,37 @@ import {
 import { faFacebookSquare } from 'node_modules/@fortawesome/free-brands-svg-icons/index';
 import { faTwitterSquare } from 'node_modules/@fortawesome/free-brands-svg-icons/index';
 import { faLinkedin } from 'node_modules/@fortawesome/free-brands-svg-icons/index';
+import React, { useState, useEffect } from 'react';
 
 const Footer = () => {
   const year = new Date().getFullYear();
+
+  const [visitCount, setVisitCount] = useState(0);
+
+  // Function to increment the visit count
+  const incrementVisitCount = () => {
+    setVisitCount(prevCount => prevCount + 1);
+  };
+
+  // Fetch the visit count from your backend API or any other source
+  // For demonstration purposes, we'll use a dummy API call here.
+  const fetchVisitCount = () => {
+    // Replace the below URL with your actual backend API endpoint
+    fetch('https://api.example.com/visitCount')
+      .then(response => response.json())
+      .then(data => {
+        setVisitCount(data.count);
+      })
+      .catch(error => {
+        console.error('Error fetching visit count:', error);
+      });
+  };
+
+  // Fetch the visit count on component mount
+  useEffect(() => {
+    fetchVisitCount();
+  }, []);
+
   return (
     <>
       <footer id='footer'>
@@ -86,6 +114,10 @@ const Footer = () => {
               />
             </a>
           </div>
+
+          <p>Number of visits: {visitCount}</p>
+          <button onClick={incrementVisitCount}></button>
+
           <p>&copy; {year} Amupedia.com. All rights reserved.</p>
         </div>
       </footer>