Using embedded tabs to also showcase wrangler file.

Author: Oxyjun

src/content/docs/kv/index.mdx

@@ -5,17 +5,7 @@ sidebar:
   order: 1
 ---
 
-import {
-	CardGrid,
-	Description,
-	Feature,
-	LinkTitleCard,
-	Plan,
-	RelatedProduct,
-	Tabs,
-	TabItem,
-	LinkButton
-} from "~/components";
+import { CardGrid, Description, Feature, LinkTitleCard, Plan, RelatedProduct, Tabs, TabItem, LinkButton } from "~/components";
 
 <Description>
 
@@ -44,33 +34,56 @@ Access your Workers KV namespace from Cloudflare Workers using the Workers Bindi
 
 <Tabs>
 <TabItem label="Workers Binding API">
-```ts
-export default {
-	async fetch(request, env, ctx): Promise<Response> {
-
-		//write a key-value pair
-		await env.KV_BINDING.put('KEY', 'VALUE');
-
-		// read a key-value pair
-		const value = await env.KV_BINDING.get('KEY');
-
-		//list all key-value pairs
-		const allKeys = await env.KV_BINDING.list();
-
-		//delete a key-value pair
-		await env.KV_BINDING.delete('KEY');
-
-		//return a Workers response
-		return new Response(
-			JSON.stringify({
-				value: value,
-				allKeys: allKeys,
-			}),
-		);
-	},
-};
-
-```
+	<Tabs>
+	<TabItem label="index.ts">
+	```ts
+	export default {
+		async fetch(request, env, ctx): Promise<Response> {
+
+			//write a key-value pair
+			await env.KV_BINDING.put('KEY', 'VALUE');
+
+			// read a key-value pair
+			const value = await env.KV_BINDING.get('KEY');
+
+			//list all key-value pairs
+			const allKeys = await env.KV_BINDING.list();
+
+			//delete a key-value pair
+			await env.KV_BINDING.delete('KEY');
+
+			//return a Workers response
+			return new Response(
+				JSON.stringify({
+					value: value,
+					allKeys: allKeys,
+				}),
+			);
+		},
+	};
+
+	```
+	</TabItem>
+	<TabItem label="wrangler.jsonc">
+		```json
+		{
+			"$schema": "node_modules/wrangler/config-schema.json",
+			"name": "WORKER-NAME",
+			"main": "src/index.ts",
+			"compatibility_date": "2025-02-04",
+			"observability": {
+				"enabled": true
+			},
+
+			"kv_namespaces": [
+				{
+					"binding": "YOUR_BINDING",
+					"id": "<YOUR_BINDING_ID>"
+				}
+			]
+		```
+	</TabItem>
+	</Tabs>
 </TabItem>
 <TabItem label="REST API">
 ```