From 5ac9409b550b24626884b07f38eca298dbae012a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 14 Sep 2023 23:45:11 -0500
Subject: [PATCH] Group site checklist into sections

---
 src/components/Checklist.tsx     | 25 ++++++++++++++++++-------
 src/components/ChecklistRow.tsx  |  2 +-
 src/site/SiteChecklistClient.tsx |  6 +++++-
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/Checklist.tsx b/src/components/Checklist.tsx
index 911ed416..fcf813b1 100644
--- a/src/components/Checklist.tsx
+++ b/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>
   );
 }
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index 5453c49c..bb15eff3 100644
--- a/src/components/ChecklistRow.tsx
+++ b/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]">
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 69c7568a..d4faea51 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/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}