From 64ad22c005465cc8686cd4e1001b5f17227ac892 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 29 Jan 2025 03:28:07 -0600
Subject: [PATCH] chore(www): add package status badge

---
 www/app/_components/Heading.tsx                  | 13 +++++++++++++
 www/app/docs/(layout)/[...slug]/DocsLayout.tsx   |  1 +
 www/app/docs/(layout)/[...slug]/RemoteLayout.tsx |  1 +
 www/data.ts                                      |  1 +
 4 files changed, 16 insertions(+)

diff --git a/www/app/_components/Heading.tsx b/www/app/_components/Heading.tsx
index e195bd73a8..0c3d484c36 100644
--- a/www/app/_components/Heading.tsx
+++ b/www/app/_components/Heading.tsx
@@ -10,6 +10,7 @@ type Props = {
 	description?: string;
 	title: string;
 	path: Array<string>;
+	packageStatus?: string;
 	lexicon?: string;
 	markup?: boolean;
 	design?: boolean;
@@ -21,6 +22,7 @@ export default function Heading({
 	description,
 	title,
 	lexicon,
+	packageStatus,
 	path = [],
 	markup,
 	design,
@@ -70,6 +72,17 @@ export default function Heading({
 						View in Lexicon
 					</a>
 				)}
+				{packageStatus && (
+					<span
+						className={classNames('badge badge-translucent', {
+							'badge-success': packageStatus === 'Stable',
+							'badge-warning': packageStatus === 'Beta',
+							'badge-danger': packageStatus === 'Deprecated',
+						})}
+					>
+						{packageStatus}
+					</span>
+				)}
 			</div>
 			{description && (
 				<p className="text-6 text-secondary">{description}</p>
diff --git a/www/app/docs/(layout)/[...slug]/DocsLayout.tsx b/www/app/docs/(layout)/[...slug]/DocsLayout.tsx
index 6ed17df4c9..ea14b7b9d5 100644
--- a/www/app/docs/(layout)/[...slug]/DocsLayout.tsx
+++ b/www/app/docs/(layout)/[...slug]/DocsLayout.tsx
@@ -67,6 +67,7 @@ export async function DocsLayout({slug}: Props) {
 					title={frontmatter.title}
 					description={frontmatter.description}
 					lexicon={frontmatter.lexiconDefinition}
+					packageStatus={frontmatter.packageStatus}
 					path={slug}
 					markup={!!fileMarkup}
 					design={!!fileDesign}
diff --git a/www/app/docs/(layout)/[...slug]/RemoteLayout.tsx b/www/app/docs/(layout)/[...slug]/RemoteLayout.tsx
index fb74e714d6..68a33e0d1b 100644
--- a/www/app/docs/(layout)/[...slug]/RemoteLayout.tsx
+++ b/www/app/docs/(layout)/[...slug]/RemoteLayout.tsx
@@ -33,6 +33,7 @@ export async function RemoteLayout({slug}: Props) {
 					title={frontmatter.title}
 					description={frontmatter.description}
 					lexicon={frontmatter.lexiconDefinition}
+					packageStatus={frontmatter.packageStatus}
 					path={slug}
 					design
 					markup={!!fileMarkup}
diff --git a/www/data.ts b/www/data.ts
index ad84a57a7b..d4e8d22998 100644
--- a/www/data.ts
+++ b/www/data.ts
@@ -10,6 +10,7 @@ import {z} from 'zod';
 const frontmatterSchema = z.object({
 	title: z.string(),
 	description: z.string(),
+	packageStatus: z.optional(z.string()),
 	packageNpm: z.optional(z.string()),
 	packageUse: z.optional(z.string()),
 	lexiconDefinition: z.optional(z.string()),