feat(analytics): migrate to GA4

src/components/Links/Links.tsx

@@ -1,7 +1,7 @@
-import { OutboundLink } from "react-ga";
 import { ArrowElbowDownRight } from "phosphor-react";
 
 import { iconCount } from "@/lib/icons";
+import OutboundLink from "@/components/OutboundLink";
 
 import "./Links.css";
 
@@ -14,7 +14,7 @@ const Links = (_: LinksProps) => {
         <ArrowElbowDownRight size={24} />
         <OutboundLink
           className="nav-link"
-          to="https://phosphoricons.com/assets/phosphor-icons.zip"
+          href="https://phosphoricons.com/assets/phosphor-icons.zip"
           eventLabel="Download all"
           download
           type="application/zip"
@@ -22,31 +22,30 @@ const Links = (_: LinksProps) => {
           Download all ({iconCount})
         </OutboundLink>
       </div>
+
       <div>
         <ArrowElbowDownRight size={24} />
         <span>
           <OutboundLink
-            className="nav-link"
-            to="https://www.figma.com/community/file/903830135544202908/Phosphor-Icons"
+            href="https://www.figma.com/community/file/903830135544202908/Phosphor-Icons"
             eventLabel="Figma library"
           >
             Figma library
           </OutboundLink>
           {" / "}
           <OutboundLink
-            className="nav-link"
-            to="https://www.figma.com/community/plugin/898620911119764089/Phosphor-Icons"
+            href="https://www.figma.com/community/plugin/898620911119764089/Phosphor-Icons"
             eventLabel="Figma plugin"
           >
             plugin
           </OutboundLink>
         </span>
       </div>
+
       <div>
         <ArrowElbowDownRight size={24} />
         <OutboundLink
-          className="nav-link"
-          to="https://phosphoricons.com/assets/phosphor-icons.sketchplugin.zip"
+          href="https://phosphoricons.com/assets/phosphor-icons.sketchplugin.zip"
           eventLabel="Download sketch plugin"
           download
           type="application/zip"
@@ -54,48 +53,40 @@ const Links = (_: LinksProps) => {
           Sketch plugin
         </OutboundLink>
       </div>
+
       <div>
         <ArrowElbowDownRight size={24} />
         <span>
-          <a className="nav-link" href="https://paypal.me/minoraxis">
+          <OutboundLink href="https://paypal.me/minoraxis" eventLabel="Donate">
             Donate on PayPal
-          </a>
+          </OutboundLink>
           {" / "}
-          <a className="nav-link" href="https://patreon.com/phosphoricons">
+          <OutboundLink
+            href="https://patreon.com/phosphoricons"
+            eventLabel="Patreon"
+          >
             Patreon
-          </a>
+          </OutboundLink>
         </span>
       </div>
-      {/* <div>
-        <ArrowElbowDownRight size={24} />
-        <a className="nav-link" href="https://paypal.me/minoraxis">
-          Donate on PayPal
-        </a>
-      </div>
+
       <div>
         <ArrowElbowDownRight size={24} />
-        <a className="nav-link" href="https://patreon.com/phosphoricons">
-          Support us on Patreon
-        </a>
-      </div>
-    */}
-      <div>
-        <ArrowElbowDownRight size={24} />
-        <a
-          className="nav-link"
+        <OutboundLink
           href="https://github.com/phosphor-icons/phosphor-home"
+          eventLabel="GitHub"
         >
           GitHub
-        </a>
+        </OutboundLink>
       </div>
       <div>
         <ArrowElbowDownRight size={24} />
-        <a
-          className="nav-link"
+        <OutboundLink
           href="https://github.com/phosphor-icons/phosphor-home/issues"
+          eventLabel="Request"
         >
           Request an icon
-        </a>
+        </OutboundLink>
       </div>
     </div>
   );