[NEB-110] Dashboard: Add Playground and API references links (#6376)

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx

@@ -1,3 +1,6 @@
+import { Button } from "@/components/ui/button";
+import { FileCode2Icon, MessageSquareQuoteIcon } from "lucide-react";
+import Link from "next/link";
 import {
   ResponsiveSearchParamsProvider,
   ResponsiveSuspense,
@@ -20,17 +23,32 @@ export function NebulaAnalyticsPage(props: {
   return (
     <ResponsiveSearchParamsProvider value={props.searchParams}>
       <header className="border-b">
-        <div className="container flex flex-col items-start gap-3 py-10 md:flex-row md:items-center">
-          <div className="flex-1">
-            <h1 className="font-semibold text-2xl tracking-tight md:text-3xl">
-              Nebula
-            </h1>
+        <div className="container flex flex-col items-start gap-4 py-10 md:flex-row md:items-center md:justify-between">
+          <h1 className="font-semibold text-3xl tracking-tight">Nebula</h1>
+
+          <div className="flex gap-3">
+            <Button variant="outline" className="gap-2 bg-card" asChild>
+              <Link href="https://nebula.thirdweb.com" target="_blank">
+                <MessageSquareQuoteIcon className="size-4 text-muted-foreground" />
+                Playground
+              </Link>
+            </Button>
+
+            <Button variant="outline" className="gap-2 bg-card" asChild>
+              <Link href="https://portal.thirdweb.com/nebula" target="_blank">
+                <FileCode2Icon className="size-4 text-muted-foreground" />
+                API Reference
+              </Link>
+            </Button>
           </div>
-          <NebulaAnalyticsFilter />
         </div>
       </header>
 
       <div className="container pt-8 pb-20">
+        <div className="mb-4 flex flex-col justify-between gap-3 md:flex-row md:items-end">
+          <h2 className="font-semibold text-2xl tracking-tight">Analytics</h2>
+          <NebulaAnalyticsFilter />
+        </div>
         <ResponsiveSuspense
           searchParamsUsed={["from", "to", "interval"]}
           fallback={<NebulaAnalyticsDashboardUI data={[]} isPending={true} />}