chore: add tracking for analytics

Author: julio4

components/useTracking.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+const CLARITY_ID = "q6bz69wquw";
+
+export const useTracking = () => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.text = `
+      (function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;
+        t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+      })(window, document, "clarity", "script", "${CLARITY_ID}");
+    `;
+    document.head.appendChild(script);
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, []);
+};

layout.tsx

@@ -1,6 +1,8 @@
 import { useSidebarToggle } from "./components/useSidebarToggle";
+import { useTracking } from "./components/useTracking";
 
 export default function Root({ children }: { children: React.ReactNode }) {
+  useTracking();
   useSidebarToggle();
   return <div className="page-wrapper">{children}</div>;
 }