feat: send content feedback plausible events

Author: a-hariti

src/components/docFeedback/index.tsx

@@ -0,0 +1,34 @@
+'use client';
+import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
+
+type Props = {
+  pathname: string;
+};
+
+export function DocFeedback({pathname}: Props) {
+  const {emit} = usePlausibleEvent();
+
+  const handleFeedback = (helpful: boolean) => {
+    emit('Doc Feedback', {props: {page: pathname, helpful}});
+  };
+
+  return (
+    <div className="flex items-center gap-2 py-4 border-t border-[var(--gray-6)]">
+      <span className="text-sm">Was this helpful?</span>
+      <button
+        onClick={() => handleFeedback(true)}
+        className="w-10 h-10 py-2 px-2 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+        aria-label="Yes, this was helpful"
+      >
+        👍
+      </button>
+      <button
+        onClick={() => handleFeedback(false)}
+        className="w-10 h-10 py-2 px-2 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+        aria-label="No, this wasn't helpful"
+      >
+        👎
+      </button>
+    </div>
+  );
+}

src/components/docPage/index.tsx

@@ -12,6 +12,7 @@ import './type.scss';
 import {Banner} from '../banner';
 import {Breadcrumbs} from '../breadcrumbs';
 import {CodeContextProvider} from '../codeContext';
+import {DocFeedback} from '../docFeedback';
 import {GitHubCTA} from '../githubCTA';
 import {Header} from '../header';
 import Mermaid from '../mermaid';
@@ -91,6 +92,8 @@ export function DocPage({
                 <CodeContextProvider>{children}</CodeContextProvider>
               </div>
 
+              <DocFeedback pathname={pathname} />
+
               <div className="grid grid-cols-2 gap-4 not-prose mt-16">
                 <div className="col-span-1">
                   {previousPage && <PaginationNav node={previousPage} title="Previous" />}

src/hooks/usePlausibleEvent.tsx

@@ -4,6 +4,10 @@ import {ReadProgressMilestone} from 'sentry-docs/types/plausible';
 
 // Adding custom events here will make them available via the hook
 type PlausibleEventProps = {
+  ['Doc Feedback']: {
+    helpful: boolean;
+    page: string;
+  };
   ['Read Progress']: {
     page: string;
     readProgress: ReadProgressMilestone;