feat: integrate PostHog for analytics tracking and add PostHogProvider component

app/components/PostHogProvider.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import posthog from "posthog-js"
+import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
+import { Suspense, useEffect } from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+
+function PathnameTracker() {
+  const posthogClient = usePostHog()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    if (posthogClient) {
+      posthogClient.capture('$pageview', {
+        path: pathname + (searchParams.toString() ? `?${searchParams.toString()}` : ''),
+      })
+    }
+  }, [posthogClient, pathname, searchParams])
+
+  return null
+}
+
+function SuspendedPostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PathnameTracker />
+    </Suspense>
+  )
+}
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+      api_host: "/ingest",
+      ui_host: "https://us.posthog.com",
+      capture_pageview: 'history_change',
+      capture_pageleave: true,
+      capture_exceptions: true,
+      debug: process.env.NODE_ENV === "development",
+    })
+  }, [])
+
+  return (
+    <PHProvider client={posthog}>
+      <SuspendedPostHogPageView />
+      {children}
+    </PHProvider>
+  )
+}