Refactor site config checklist

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}

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',

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}

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>
+  );
+}

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