fix: allow users to disable platforms in the sdk selector

src/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro

@@ -3,7 +3,7 @@ import { z } from "astro:schema";
 import CodeSnippet from "./RTKCodeSnippet";
 
 const props = z.object({
-	id: z.string(),
+	id: z.union([z.string(), z.array(z.string())]),
 });
 
 const { id } = props.parse(Astro.props);

src/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import { useFramework } from "../hooks/useFramework";
 
 interface RTKCodeSnippetProps {
-	id: string; // e.g. "web-react"
+	id: string | string[]; // e.g. "web-react" or ["web-react", "web-vue"]
 	children: ReactNode; // MDX content
 }
 
@@ -12,6 +12,9 @@ export default function RTKCodeSnippet({ id, children }: RTKCodeSnippetProps) {
 	if (!framework) return null;
 
 	const activeId = `${platform}-${framework.id}`;
+	const ids = Array.isArray(id) ? id : [id];
 
-	return <div className={activeId === id ? "" : "hidden"}>{children}</div>;
+	return (
+		<div className={ids.includes(activeId) ? "" : "hidden"}>{children}</div>
+	);
 }

src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro

@@ -1,5 +1,17 @@
 ---
+import { z } from "astro:schema";
 import SDKSelector from "./RTKSDKSelector";
+
+const platform = z.enum(["web", "mobile"]);
+
+const props = z.object({
+	disabledPlatforms: z
+		.union([platform, z.array(platform)])
+		.optional()
+		.transform((value) => (typeof value === "string" ? [value] : value)),
+});
+
+const { disabledPlatforms } = props.parse(Astro.props);
 ---
 
-<SDKSelector client:load />
+<SDKSelector client:load disabledPlatforms={disabledPlatforms} />

src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx

@@ -6,7 +6,11 @@ import {
 	mobileFrameworks,
 } from "../hooks/useFramework";
 
-export default function SDKSelector() {
+interface SDKSelectorProps {
+	disabledPlatforms?: Platform[];
+}
+
+export default function SDKSelector({ disabledPlatforms }: SDKSelectorProps) {
 	const { platform, framework, setSelection } = useFramework();
 
 	const platforms: {
@@ -28,52 +32,75 @@ export default function SDKSelector() {
 		[platform],
 	);
 
+	const isPlatformDisabled = (p: Platform) =>
+		Boolean(disabledPlatforms?.includes(p));
+	const activePlatformDisabled = isPlatformDisabled(platform);
+
+	const disabledPlatformsString = disabledPlatforms?.join(", ");
+
 	return (
 		<>
-			<div className="my-5 flex flex-col gap-0 rounded-sm bg-blue-50 p-2 dark:bg-neutral-800">
+			<div className="flex flex-row gap-1 rounded-md bg-blue-100 p-2 text-blue-900 dark:bg-neutral-800 dark:text-neutral-300">
+				This page is not available for the <b>{disabledPlatformsString}</b>
+				platform.
+			</div>
+			<div className="my-5 flex flex-col gap-0 rounded-md bg-blue-100 p-2 dark:bg-neutral-800">
 				<div className="flex w-full flex-row items-start justify-start gap-2">
-					{platforms.map((p) => (
-						<button
-							type="button"
-							className={`m-0 ${p.id === platform ? "rounded-t-md bg-white font-semibold text-blue-800 dark:bg-neutral-700 dark:text-blue-100" : "bg-blue-50 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300"} cursor-pointer px-2 py-1 font-medium`}
-							onClick={() => {
-								const nextPlatform = p.id;
-								const nextFramework =
-									nextPlatform === "web"
-										? webFrameworks[0]
-										: mobileFrameworks[0];
-
-								setSelection(nextPlatform, nextFramework);
-							}}
-							key={p.id}
-						>
-							{p.label}
-						</button>
-					))}
-				</div>
-				{frameworks.length < 1 && (
-					<div className="m-0 w-full rounded-r-md rounded-b-md bg-white p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
-						No frameworks available.
-					</div>
-				)}
-				<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-white p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
-					{frameworks.map((fw) => {
-						const handleClick = () => {
-							setSelection(platform, fw);
-						};
+					{platforms.map((p) => {
+						const disabled = isPlatformDisabled(p.id);
 
 						return (
 							<button
-								key={fw.id}
+								key={p.id}
 								type="button"
-								className={`m-0 flex ${framework?.id === fw.id ? "font-semibold text-blue-800 dark:text-blue-100" : ""} text-md cursor-pointer items-center rounded-md bg-white px-3 py-1 font-medium dark:bg-neutral-700`}
-								onClick={handleClick}
+								disabled={disabled}
+								className={`m-0 ${p.id === platform ? "rounded-t-md bg-neutral-50 text-blue-500 dark:bg-neutral-700" : "bg-blue-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"} ${disabled ? "cursor-not-allowed opacity-50" : ""} px-2 py-1 font-medium`}
+								onClick={() => {
+									if (disabled) return;
+									const nextPlatform = p.id;
+									const nextFramework =
+										nextPlatform === "web"
+											? webFrameworks[0]
+											: mobileFrameworks[0];
+
+									setSelection(nextPlatform, nextFramework);
+								}}
 							>
-								{fw.label}
+								{p.label}
 							</button>
 						);
 					})}
 				</div>
+				{activePlatformDisabled && (
+					<div className="m-0 w-full rounded-r-md rounded-b-md bg-neutral-50 p-4 text-sm text-gray-700 dark:bg-neutral-700 dark:text-gray-300">
+						This page is not available for the {platform} platform.
+					</div>
+				)}
+				{!activePlatformDisabled && frameworks.length < 1 && (
+					<div className="m-0 w-full rounded-r-md rounded-b-md bg-neutral-50 p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
+						No frameworks available.
+					</div>
+				)}
+				{!activePlatformDisabled && (
+					<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-neutral-50 p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
+						{frameworks.map((fw) => {
+							const handleClick = () => {
+								setSelection(platform, fw);
+							};
+
+							return (
+								<button
+									key={fw.id}
+									type="button"
+									className={`m-0 flex ${framework?.id === fw.id ? "text-blue-500 italic" : ""} text-md cursor-pointer items-center rounded-md bg-neutral-50 px-3 py-1 font-medium dark:bg-neutral-700`}
+									onClick={handleClick}
+								>
+									{fw.label}
+								</button>
+							);
+						})}
+					</div>
+				)}
 			</div>
 		</>
 	);