diff --git a/docs/src/app/(home)/[[...slug]]/page.tsx b/docs/src/app/(home)/[[...slug]]/page.tsx index a9a36b4f..20b84e3e 100644 --- a/docs/src/app/(home)/[[...slug]]/page.tsx +++ b/docs/src/app/(home)/[[...slug]]/page.tsx @@ -18,6 +18,7 @@ import { ChevronDown, CodeXml, ExternalLink } from 'lucide-react'; import type { Metadata } from 'next'; import Link from 'next/link'; import { notFound, redirect } from 'next/navigation'; +import { PageFeedback } from '@/components/page-feedback'; export default async function Page(props: { params: Promise<{ slug?: string[] }>; @@ -270,6 +271,7 @@ export default async function Page(props: { a: createRelativeLink(source, page), })} /> + ); diff --git a/docs/src/components/page-feedback.tsx b/docs/src/components/page-feedback.tsx new file mode 100644 index 00000000..f7067aec --- /dev/null +++ b/docs/src/components/page-feedback.tsx @@ -0,0 +1,53 @@ +'use client'; + +import { useState } from 'react'; +import posthog from 'posthog-js'; +import { ThumbsUp, ThumbsDown } from 'lucide-react'; + +export function PageFeedback() { + const [feedback, setFeedback] = useState<'helpful' | 'not_helpful' | null>(null); + + const handleFeedback = (isHelpful: boolean) => { + const feedbackType = isHelpful ? 'helpful' : 'not_helpful'; + setFeedback(feedbackType); + + posthog.capture(`page_feedback_${feedbackType}`, { + page: window.location.pathname, + page_title: document.title, + }); + }; + + return ( +
+ {feedback === null ? ( +
+

Was this page helpful?

+
+ + +
+
+ ) : ( +

+ {feedback === 'helpful' + ? 'Thanks for your feedback!' + : 'Thanks for your feedback. We\'ll work on improving this page.'} +

+ )} +
+ ); +}