From 195c640efcaba1a30b649fbb9f4f2e230fc727ae Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 20 Mar 2024 19:20:20 -0500
Subject: [PATCH] Refactor site config checklist

---
 src/components/Badge.tsx             |  3 +++
 src/components/Checklist.tsx         | 18 ++++++++++++------
 src/components/ChecklistRow.tsx      | 11 ++---------
 src/components/ExperimentalBadge.tsx | 20 ++++++++++++++++++++
 src/site/SiteChecklistClient.tsx     |  2 +-
 5 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ExperimentalBadge.tsx

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index fb4850d4..8a942928 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -7,6 +7,7 @@ export default function Badge({
   highContrast,
   uppercase,
   interactive,
+  className,
 }: {
   children: React.ReactNode
   type?: 'large' | 'small' | 'text-only'
@@ -14,6 +15,7 @@ export default function Badge({
   highContrast?: boolean
   uppercase?: boolean
   interactive?: boolean
+  className?: string
 }) {
   const stylesForType = () => {
     switch (type) {
@@ -44,6 +46,7 @@ export default function Badge({
       'leading-none',
       stylesForType(),
       uppercase && 'uppercase tracking-wider',
+      className,
     )}>
       <span className={clsx(dimContent && 'opacity-50')}>
         {children}
diff --git a/src/components/Checklist.tsx b/src/components/Checklist.tsx
index cb80dded..62a23bab 100644
--- a/src/components/Checklist.tsx
+++ b/src/components/Checklist.tsx
@@ -1,30 +1,36 @@
 import { ReactNode } from 'react';
 import { clsx } from 'clsx/lite';
+import ExperimentalBadge from './ExperimentalBadge';
+import Badge from './Badge';
 
 export default function Checklist({
   title,
   icon,
   optional,
+  experimental,
   children,
 }: {
   title: string
   icon?: ReactNode
   optional?: boolean
+  experimental?: boolean
   children: ReactNode
 }) {
   return (
     <div>
       <div className={clsx(
-        'flex items-center gap-3',
+        'inline-flex items-center',
         'text-gray-600 dark:text-gray-300',
         'pl-[18px] mb-3 text-lg',
       )}>
-        {icon}
-        <div className="flex gap-1.5">
-          <div>{title}</div>
+        <span className="w-7 shrink-0">{icon}</span>
+        <span className="inline-flex flex-wrap items-center gap-y-1 gap-x-1.5">
+          {title}
           {optional &&
-            <div className="text-dim">(Optional)</div>}
-        </div>
+            <Badge type="small">Optional</Badge>}
+          {experimental &&
+            <ExperimentalBadge />}
+        </span>
       </div>
       <div className={clsx(
         'bg-white dark:bg-black',
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index db6662fd..abf0790a 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { clsx } from 'clsx/lite';
 import StatusIcon from './StatusIcon';
+import ExperimentalBadge from './ExperimentalBadge';
 
 export default function ChecklistRow({
   title,
@@ -33,15 +34,7 @@ export default function ChecklistRow({
         )}>
           {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>}
+            <ExperimentalBadge className="translate-y-[0.5px]" />}
         </div>
         <div>
           {children}
diff --git a/src/components/ExperimentalBadge.tsx b/src/components/ExperimentalBadge.tsx
new file mode 100644
index 00000000..efeeb59d
--- /dev/null
+++ b/src/components/ExperimentalBadge.tsx
@@ -0,0 +1,20 @@
+import clsx from 'clsx/lite';
+import Badge from './Badge';
+
+export default function ExperimentalBadge({
+  className,
+}: {
+  className?: string
+}) {
+  return (
+    <Badge
+      type="small"
+      className={clsx(
+        'text-pink-500 dark:text-white',
+        'bg-pink-100 dark:bg-pink-600',
+        className,
+      )}>
+      Experimental
+    </Badge>
+  );
+}
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 87c2442d..31f3c185 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -271,13 +271,13 @@ export default function SiteChecklistClient({
       <Checklist
         title="AI Text Generation"
         icon={<HiSparkles />}
+        experimental
         optional
       >
         <ChecklistRow
           title="Add OpenAI Secret Key"
           status={isAiTextGenerationEnabled}
           isPending={isPendingPage}
-          experimental
           optional
         >
           Store your OpenAI secret key in order to add experimental support