Implement MS Clarity Data Collector

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-github-calendar": "^4.0.8",
     "react-icons": "^4.12.0",
+    "react-microsoft-clarity": "^1.2.0",
     "react-parallax-tilt": "^1.7.179",
     "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",

src/App.tsx

@@ -6,14 +6,15 @@
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Import the required modules
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import "bootstrap/dist/css/bootstrap.min.css";
+import { clarity } from "react-microsoft-clarity";
 
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Import the app components
 
-import ScrollToTop from "./components/ScrollToTop"
+import ScrollToTop from "./components/ScrollToTop";
 import Preloader from "./components/Preloader";
 import Navbar from "./components/Navbar";
 import Home from "./components/Home/index";
@@ -22,13 +23,20 @@ import Footer from "./components/Footer";
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Import the app styles
 
-import './styles/index.css';
+import "./styles/index.css";
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Define the App component
 
 function App() {
   const [load, upadateLoad] = useState(true);
 
+  // -- Initialise Microsoft Clarity
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") {
+      clarity.init("mqgrxsm7hq");
+    }
+  }, []);
+
   // -- Set a timer to remove the preloader after 1.2 seconds
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -54,4 +62,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;