From 7b6bd3188199af1eac8f8d6d21b15a0bdc3d5619 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 23 Oct 2024 22:15:16 +0900
Subject: [PATCH] Fix the tab names in the playground (#9811)

* Rename the `name` prop to `label` on TabItem in DemosLite

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/legal-months-speak.md                | 5 +++++
 js/_website/src/lib/components/DemosLite.svelte | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/legal-months-speak.md

diff --git a/.changeset/legal-months-speak.md b/.changeset/legal-months-speak.md
new file mode 100644
index 0000000000..01e6e3dbfe
--- /dev/null
+++ b/.changeset/legal-months-speak.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Fix the tab names in the playground
diff --git a/js/_website/src/lib/components/DemosLite.svelte b/js/_website/src/lib/components/DemosLite.svelte
index 41ceb97b12..e4e46d4948 100644
--- a/js/_website/src/lib/components/DemosLite.svelte
+++ b/js/_website/src/lib/components/DemosLite.svelte
@@ -449,14 +449,14 @@
 
 	const TABS: Tab[] = [
 		{
-			name: "Code",
+			label: "Code",
 			id: "code",
 			visible: true,
 			interactive: true,
 			elem_id: "code"
 		},
 		{
-			name: "Packages",
+			label: "Packages",
 			id: "packages",
 			visible: true,
 			interactive: true,
@@ -546,7 +546,7 @@
 						>
 							<TabItem
 								id={TABS[0].id}
-								name={TABS[0].name}
+								label={TABS[0].label}
 								visible={TABS[0].visible}
 								interactive={TABS[0].interactive}
 								elem_classes={["editor-tabitem"]}
@@ -564,7 +564,7 @@
 							</TabItem>
 							<TabItem
 								id={TABS[1].id}
-								name={TABS[1].name}
+								label={TABS[1].label}
 								visible={TABS[1].visible}
 								interactive={TABS[1].interactive}
 								elem_classes={["editor-tabitem"]}