[Docs Site] Add key in ProductCatalog component and hide breadcrumbs (#19250)

Author: KianNH

src/components/ProductCatalog.tsx

@@ -110,6 +110,7 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 				{productList.map((product) => {
 					return (
 						<a
+							key={product.data.name}
 							href={product.data.product.url}
 							className="block self-stretch rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
 						>

src/pages/products.astro

@@ -6,6 +6,7 @@ import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { getIconData, iconToSVG } from "@iconify/utils";
 import ProductCatalog from "~/components/ProductCatalog";
 import type { ProductData } from "~/components/ProductCatalog";
+import type { StarlightPageProps } from "@astrojs/starlight/props";
 
 let products: CollectionEntry<"products">[] = await getCollection(
 	"products",
@@ -31,15 +32,18 @@ let productData: ProductData[] = products.map((product) => {
 	};
 });
 
-const frontmatter = {
-	title: "Products",
-	description:
-		"API reference, how-to guides, tutorials, example code, and more.",
-	template: "splash",
-} as const;
+const props = {
+	frontmatter: {
+		title: "Products",
+		description:
+			"API reference, how-to guides, tutorials, example code, and more.",
+		template: "splash",
+	},
+	hideBreadcrumbs: true,
+} as StarlightPageProps;
 ---
 
-<StarlightPage frontmatter={frontmatter}>
+<StarlightPage {...props}>
 	<ProductCatalog products={productData} client:load />
 </StarlightPage>