Portal: Add bridge widget playground links (#8575)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the `Bridge Widget` to enhance its integration options and improve user experience by adding a live playground feature. It modifies the integration types, updates the code logic, and introduces new UI components for better functionality.

### Detailed summary
- Changed `href` in `sidebar.tsx` for the Playground link.
- Updated `integrationType` options in `types.ts` to include "react".
- Adjusted code language conditions in `code.tsx` based on `integrationType`.
- Added `PlayIcon` and `ArticleIconCard` components in multiple `.mdx` files.
- Introduced a "Try it out" section in several `.mdx` files for the Playground.
- Modified the `Page` component to accept `searchParams` and determine the valid tab.
- Enhanced `BridgeWidgetPlayground` to manage URL updates based on the selected integration type.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Playground now supports URL parameters to pre-select integration tabs and keeps the browser URL in sync when switching tabs
  * React integration tab standardized and labeled consistently with other tabs

* **Documentation**
  * Added "Try it out" call-to-action cards throughout docs linking to the live playground

* **Chores**
  * Sidebar playground link updated to point to the bridge-specific playground URL

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsx

@@ -19,11 +19,28 @@ const defaultOptions: BridgeWidgetPlaygroundOptions = {
   },
 };
 
-export function BridgeWidgetPlayground() {
+function updatePageUrl(tab: BridgeWidgetPlaygroundOptions["integrationType"]) {
+  const url = new URL(window.location.href);
+  if (tab === defaultOptions.integrationType) {
+    url.searchParams.delete("tab");
+  } else {
+    url.searchParams.set("tab", tab);
+  }
+
+  window.history.replaceState({}, "", url.toString());
+}
+
+export function BridgeWidgetPlayground(props: {
+  defaultTab: "iframe" | "script" | "react" | undefined;
+}) {
   const { theme } = useTheme();
 
-  const [options, setOptions] =
-    useState<BridgeWidgetPlaygroundOptions>(defaultOptions);
+  const [options, setOptions] = useState<BridgeWidgetPlaygroundOptions>(() => {
+    return {
+      ...defaultOptions,
+      integrationType: props.defaultTab || defaultOptions.integrationType,
+    };
+  });
 
   // change theme on global theme change
   useEffect(() => {
@@ -36,6 +53,10 @@ export function BridgeWidgetPlayground() {
     }));
   }, [theme]);
 
+  useEffect(() => {
+    updatePageUrl(options.integrationType);
+  }, [options.integrationType]);
+
   return (
     <div>
       <TabButtons
@@ -54,9 +75,8 @@ export function BridgeWidgetPlayground() {
           },
           {
             name: "React",
-            onClick: () =>
-              setOptions({ ...options, integrationType: "component" }),
-            isActive: options.integrationType === "component",
+            onClick: () => setOptions({ ...options, integrationType: "react" }),
+            isActive: options.integrationType === "react",
           },
         ]}
       />

apps/playground-web/src/app/bridge/bridge-widget/components/code.tsx

@@ -25,7 +25,7 @@ export function CodeGen(props: { options: BridgeWidgetPlaygroundOptions }) {
         <CodeClient
           className="grow"
           code={getCode(props.options)}
-          lang={props.options.integrationType === "component" ? "tsx" : "html"}
+          lang={props.options.integrationType === "react" ? "tsx" : "html"}
         />
       </Suspense>
     </div>
@@ -36,7 +36,7 @@ function getCode(options: BridgeWidgetPlaygroundOptions) {
   if (options.integrationType === "script") {
     return getCode_Script(options);
   }
-  if (options.integrationType === "component") {
+  if (options.integrationType === "react") {
     return getCode_ReactComponent(options);
   }
   if (options.integrationType === "iframe") {

apps/playground-web/src/app/bridge/bridge-widget/components/types.ts

@@ -5,7 +5,7 @@ import type {
 } from "thirdweb/react";
 
 export type BridgeWidgetPlaygroundOptions = {
-  integrationType: "script" | "component" | "iframe";
+  integrationType: "iframe" | "script" | "react";
   theme: {
     type: "dark" | "light";
     darkColorOverrides: ThemeOverrides["colors"];

apps/playground-web/src/app/bridge/bridge-widget/page.tsx

@@ -8,6 +8,9 @@ const title = "Bridge Widget";
 const description =
   "Easily embed cross-chain token swap and fiat onramp UI into your app";
 
+const validTabs = ["iframe", "script", "react"] as const;
+type ValidTabs = (typeof validTabs)[number];
+
 export const metadata = createMetadata({
   description: description,
   title,
@@ -17,7 +20,19 @@ export const metadata = createMetadata({
   },
 });
 
-export default function Page() {
+export default async function Page(props: {
+  searchParams: Promise<{
+    tab?: string | undefined | string[];
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const tab =
+    typeof searchParams.tab === "string" ? searchParams.tab : undefined;
+
+  const validTab = validTabs.includes(tab as ValidTabs)
+    ? (tab as ValidTabs)
+    : undefined;
+
   return (
     <ThirdwebProvider>
       <PageLayout
@@ -26,7 +41,7 @@ export default function Page() {
         description={description}
         docsLink="https://portal.thirdweb.com/bridge/bridge-widget?utm_source=playground"
       >
-        <BridgeWidgetPlayground />
+        <BridgeWidgetPlayground defaultTab={validTab} />
       </PageLayout>
     </ThirdwebProvider>
   );

apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx

@@ -1,12 +1,17 @@
+import bridgeWidgetDark from "../bridge-widget-dark.png";
+import bridgeWidgetLight from "../bridge-widget-light.png";
 import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  ArticleIconCard,
   Details,
   createMetadata,
   DocImage
 } from "@doc";
-import bridgeWidgetDark from "../bridge-widget-dark.png";
-import bridgeWidgetLight from "../bridge-widget-light.png";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@doc";
 import { IframeCodePreview } from "./iframe-code-preview";
+import { PlayIcon } from "lucide-react";
 
 export const metadata = createMetadata({
   image: {
@@ -42,6 +47,15 @@ The Bridge widget iframe makes it easy to embed cross-chain swaps and fiat onram
 <IframeCodePreview src="https://thirdweb.com/bridge/widget" />
 
 
+## Try it out
+
+<ArticleIconCard
+	title="Bridge Widget Playground"
+	description="Try out the Bridge Widget in our live playground"
+	icon={PlayIcon}
+	href="https://playground.thirdweb.com/bridge/bridge-widget"
+/>
+
 ## Options
 
 You can customize theme, currencies, token selections etc using query parameters as mentioned below

apps/portal/src/app/bridge/bridge-widget/page.mdx

@@ -6,7 +6,7 @@ import {
 import bridgeWidgetDark from "./bridge-widget-dark.png";
 import bridgeWidgetLight from "./bridge-widget-light.png";
 import { ArticleIconCard, Grid } from "@doc";
-import { CodeIcon, FrameIcon } from "lucide-react";
+import { CodeIcon, FrameIcon, PlayIcon } from "lucide-react";
 import { ReactIcon } from "@/icons";
 
 export const metadata = createMetadata({
@@ -58,4 +58,14 @@ You can integrate the bridge widget into your website using an iframe, a script
 	href="/bridge/bridge-widget/react"
 />
 
-</div>
+
+</div>
+
+## Try it out
+
+<ArticleIconCard
+	title="Bridge Widget Playground"
+	description="Try out the Bridge Widget in our live playground"
+	icon={PlayIcon}
+	href="https://playground.thirdweb.com/bridge/bridge-widget"
+/>

apps/portal/src/app/bridge/bridge-widget/react/page.mdx

@@ -1,13 +1,12 @@
 import {
-  Details,
+  ArticleIconCard,
   createMetadata,
   DocImage
 } from "@doc";
 import bridgeWidgetDark from "../bridge-widget-dark.png";
 import bridgeWidgetLight from "../bridge-widget-light.png";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@doc";
+import { PlayIcon } from "lucide-react";
 import { ReactIcon } from "@/icons";
-import { ArticleIconCard } from "@doc";
 
 export const metadata = createMetadata({
   image: {
@@ -80,4 +79,13 @@ function Example() {
   description="View the API reference for the BridgeWidget component"
   icon={ReactIcon}
   href="/references/typescript/v5/BridgeWidget"
+/>
+
+## Try it out
+
+<ArticleIconCard
+	title="Bridge Widget Playground"
+	description="Try out the Bridge Widget in our live playground"
+	icon={PlayIcon}
+	href="https://playground.thirdweb.com/bridge/bridge-widget?tab=react"
 />

apps/portal/src/app/bridge/bridge-widget/script/page.mdx

@@ -1,10 +1,12 @@
 import {
-  Details,
+    ArticleIconCard,
+    Details,
   createMetadata,
   DocImage
 } from "@doc";
 import bridgeWidgetDark from "../bridge-widget-dark.png";
 import bridgeWidgetLight from "../bridge-widget-light.png";
+import { PlayIcon } from "lucide-react";
 
 export const metadata = createMetadata({
   image: {
@@ -56,6 +58,15 @@ The Bridge widget script makes it easy to embed cross-chain swaps and fiat onram
 </script>
 ```
 
+## Try it out
+
+<ArticleIconCard
+	title="Bridge Widget Playground"
+	description="Try out the Bridge Widget in our live playground"
+	icon={PlayIcon}
+	href="https://playground.thirdweb.com/bridge/bridge-widget?tab=script"
+/>
+
 
 ## Options
 

apps/portal/src/app/bridge/sidebar.tsx

@@ -13,7 +13,7 @@ export const sidebar: SideBar = {
       icon: <ZapIcon />,
     },
     {
-      href: "https://playground.thirdweb.com",
+      href: "https://playground.thirdweb.com/bridge",
       name: "Playground",
       icon: <ExternalLinkIcon />,
     },