From 3b0c183c556b70aca8eb041ca790050424ec1ba2 Mon Sep 17 00:00:00 2001
From: Antoni Silvestrovic <antoni.silvestrovic@gmail.com>
Date: Fri, 22 Mar 2024 20:26:06 +0200
Subject: [PATCH] Added analytics handler

---
 apps/nextjs/src/components/announcement-bar.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/src/components/announcement-bar.tsx b/apps/nextjs/src/components/announcement-bar.tsx
index 1cb68459..19068821 100644
--- a/apps/nextjs/src/components/announcement-bar.tsx
+++ b/apps/nextjs/src/components/announcement-bar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { MouseEventHandler } from "react";
 import Link from "next/link";
 import { atom, useAtom } from "jotai";
 import { XIcon } from "lucide-react";
@@ -22,7 +23,11 @@ export const AnnouncementBar = ({ adsEnabled }: { adsEnabled: boolean }) => {
         display: announcementBarHidden ? "none" : "block",
       }}
     >
-      {adsEnabled ? <Banner2 /> : <Banner1 />}
+      {adsEnabled ? (
+        <Banner2 onClick={() => analytics.track("banner_ad_quassum_design")} />
+      ) : (
+        <Banner1 />
+      )}
       <span
         className="absolute right-0 top-0 flex h-full items-center px-2"
         onClick={() => {
@@ -59,7 +64,11 @@ const Banner1 = () => {
   );
 };
 
-const Banner2 = () => {
+const Banner2 = ({
+  onClick,
+}: {
+  onClick: MouseEventHandler<HTMLAnchorElement>;
+}) => {
   return (
     <p className="mx-auto w-fit px-8 text-center text-sm">
       Looking for a gift for a classy friend? 🎁 Check out our 3D printing
@@ -67,6 +76,7 @@ const Banner2 = () => {
       <Link
         href="http://quassum.design/"
         className="font-normal text-blue-500 visited:text-purple-700 hover:text-blue-600 active:text-blue-700 dark:text-blue-300 dark:visited:text-purple-300 dark:hover:text-blue-400 dark:active:text-blue-200"
+        onClick={onClick}
       >
         quassum.design
       </Link>