fix: add ui component gallery

src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx

@@ -30,12 +30,12 @@ export default function SDKSelector() {
 
 	return (
 		<>
-			<div className="my-5 flex flex-col gap-0 rounded-md bg-blue-100 p-2 dark:bg-neutral-800">
+			<div className="my-5 flex flex-col gap-0 rounded-sm bg-blue-50 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-neutral-50 text-blue-500 dark:bg-neutral-700" : "bg-blue-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"} px-2 py-1 font-medium`}
+							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 =
@@ -52,11 +52,11 @@ export default function SDKSelector() {
 					))}
 				</div>
 				{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">
+					<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-neutral-50 p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
+				<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);
@@ -66,7 +66,7 @@ export default function SDKSelector() {
 							<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`}
+								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}
 							>
 								{fw.label}

src/components/realtimekit/RTKUIComponent/RTKUIComponent.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+	id: string;
+	name: string;
+	imagePath: string;
+	componentName: string;
+}
+
+const { name, imagePath, componentName, id } = Astro.props;
+import UIComponent from "./RTKUIComponent.tsx";
+
+// Convert ~ alias to proper import path for Astro
+const resolvedImagePath = imagePath.startsWith("~/")
+	? imagePath.replace("~/", "/src/")
+	: imagePath;
+---
+
+<UIComponent
+	client:load
+	id={id}
+	name={name}
+	imagePath={resolvedImagePath}
+	componentName={componentName}
+/>

src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx

@@ -0,0 +1,95 @@
+interface Props {
+	id: string;
+	name: string;
+	imagePath: string;
+	componentName: string;
+}
+
+import { useMemo, useState } from "react";
+import { useFramework } from "../hooks/useFramework";
+
+const kebabToPascalCase = (str: string): string => {
+	return str
+		.split("-")
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+		.join("");
+};
+
+const RTKUIComponent = ({ id, imagePath, name, componentName }: Props) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const { platform, framework } = useFramework();
+
+	const component = useMemo(() => {
+		if (platform !== "web") return componentName;
+		if (framework.id === "react") return kebabToPascalCase(componentName);
+		return componentName;
+	}, [platform, framework, componentName]);
+
+	const toggleImageSize = () => {
+		setIsExpanded(!isExpanded);
+	};
+
+	return (
+		<div className="mt-2 flex flex-col items-center gap-3" id={id}>
+			{!isExpanded && (
+				<div className="relative">
+					<img
+						src={imagePath}
+						alt={name}
+						style={{ border: "solid 1px #ccc", width: "200px" }}
+						className={`w-full rounded-md transition-all duration-300 ease-in-out`}
+					/>
+					<button
+						onClick={toggleImageSize}
+						style={{ border: "solid 4px #fff" }}
+						className={`absolute bottom-0 left-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md p-1 text-black`}
+					>
+						⛶
+					</button>
+				</div>
+			)}
+
+			{isExpanded && (
+				<div
+					className="flex flex-col items-center gap-4 rounded-md p-4"
+					style={{
+						width: "100%",
+						background: "white",
+						border: "solid 1px #ccc",
+					}}
+				>
+					<div className="relative">
+						<img
+							src={imagePath}
+							alt={name}
+							style={{
+								border: "solid 1px #ccc",
+								width: "100%",
+								height: "500px",
+							}}
+							className={`w-full rounded-md transition-all duration-300 ease-in-out`}
+						/>
+						<button
+							onClick={toggleImageSize}
+							style={{ border: "solid 4px #fff" }}
+							className={`absolute bottom-0 left-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md p-1 text-black`}
+						>
+							−
+						</button>
+					</div>
+					<code className="w-fit rounded-sm bg-gray-100 p-1 dark:bg-neutral-700">
+						{component}
+					</code>
+				</div>
+			)}
+
+			{!isExpanded && (
+				<code className="w-fit rounded-sm bg-gray-100 p-1 dark:bg-neutral-700">
+					{component}
+				</code>
+			)}
+		</div>
+	);
+};
+
+export default RTKUIComponent;

src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.astro

@@ -0,0 +1,5 @@
+---
+import UIComponentGrid from "./RTKUIComponentGrid.tsx";
+---
+
+<UIComponentGrid client:load />