From 340c2f879ad1ed2e55400fda3376ed3ec709c4fe Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 20 Mar 2024 15:37:17 -0500
Subject: [PATCH] Add experimental badge to AI-generated feature

---
 src/components/ChecklistRow.tsx  | 17 ++++++++++++++++-
 src/site/SiteChecklistClient.tsx |  1 +
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index 10b91f5a..db6662fd 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -7,12 +7,14 @@ export default function ChecklistRow({
   status,
   isPending,
   optional,
+  experimental,
   children,
 }: {
   title: string
   status: boolean
   isPending: boolean
   optional?: boolean
+  experimental?: boolean
   children: ReactNode
 }) {
   return (
@@ -25,8 +27,21 @@ export default function ChecklistRow({
         loading={isPending}
       />
       <div className="flex flex-col min-w-0">
-        <div className="font-bold dark:text-gray-300">
+        <div className={clsx(
+          'flex flex-wrap items-center gap-2',
+          'font-bold dark:text-gray-300',
+        )}>
           {title}
+          {experimental &&
+            <span className={clsx(
+              'text-[9px] font-medium uppercase tracking-wide leading-none',
+              'px-[3px] py-[2px] rounded-[0.2rem] translate-y-[0.5px]',
+              'text-pink-500 dark:text-white',
+              'bg-pink-50 dark:bg-pink-600',
+              'border border-pink-200/50 dark:border-pink-600',
+            )}>
+              Experimental
+            </span>}
         </div>
         <div>
           {children}
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 0d8febec..1fb9ec0d 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -305,6 +305,7 @@ export default function SiteChecklistClient({
           title="AI-generated Text"
           status={isAiTextGenerationEnabled}
           isPending={isPendingPage}
+          experimental
           optional
         >
           Store your OpenAI secret key in order to add experimental support