Group site checklist into sections

src/components/Checklist.tsx

@@ -1,18 +1,29 @@
 import { cc } from '@/utility/css';
 
 export default function Checklist({
+  title,
   children,
 }: {
+  title?: string
   children: React.ReactNode
 }) {
   return (
-    <div className={cc(
-      'bg-white dark:bg-black',
-      'dark:text-gray-400',
-      'border border-gray-200 dark:border-gray-800 rounded-md',
-      'divide-y divide-gray-200 dark:divide-gray-800',
-    )}>
-      {children}
+    <div>
+      {title &&
+        <div className={cc(
+          'font-bold dark:text-gray-300',
+          'pl-4 mb-2',
+        )}>
+          {title}
+        </div>}
+      <div className={cc(
+        'bg-white dark:bg-black',
+        'dark:text-gray-400',
+        'border border-gray-200 dark:border-gray-800 rounded-md',
+        'divide-y divide-gray-200 dark:divide-gray-800',
+      )}>
+        {children}
+      </div>
     </div>
   );
 }

src/components/ChecklistRow.tsx

@@ -18,7 +18,7 @@ export default function ChecklistRow({
   return (
     <div className={cc(
       'flex gap-2.5',
-      'px-4 py-3',
+      'px-4 pt-2 pb-2.5',
       'text-left',
     )}>
       <div className="min-w-[1rem] pt-[1px]">

src/site/SiteChecklistClient.tsx

@@ -101,7 +101,7 @@ export default function SiteChecklistClient({
 
   return (
     <div className="text-sm max-w-xl space-y-4">
-      <Checklist>
+      <Checklist title="Site content">
         <ChecklistRow
           title="Add title"
           status={hasTitle}
@@ -119,6 +119,8 @@ export default function SiteChecklistClient({
           Store in environment variable:
           {renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])}
         </ChecklistRow>
+      </Checklist>
+      <Checklist title="Storage">
         <ChecklistRow
           title="Setup database"
           status={hasPostgres}
@@ -143,6 +145,8 @@ export default function SiteChecklistClient({
           {' '}
           and connect to project
         </ChecklistRow>
+      </Checklist>
+      <Checklist title="Authentication">
         <ChecklistRow
           title="Setup auth"
           status={hasAuth}