From 95be04f185f5140ba08d7bcb2f64b45d019457ad Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 7 Jan 2024 16:00:03 -0600
Subject: [PATCH] Streamline photo empty state

---
 src/photo/PhotosEmptyState.tsx | 45 ++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/photo/PhotosEmptyState.tsx b/src/photo/PhotosEmptyState.tsx
index edeebbbf..7c495295 100644
--- a/src/photo/PhotosEmptyState.tsx
+++ b/src/photo/PhotosEmptyState.tsx
@@ -1,24 +1,21 @@
 import InfoBlock from '@/components/InfoBlock';
 import SiteGrid from '@/components/SiteGrid';
 import { IS_SITE_READY } from '@/site/config';
+import { PATH_ADMIN_CONFIGURATION, PATH_ADMIN_PHOTOS } from '@/site/paths';
 import SiteChecklist from '@/site/SiteChecklist';
 import { clsx } from 'clsx/lite';
 import Link from 'next/link';
+import { FaArrowRight } from 'react-icons/fa';
 import { HiOutlinePhotograph } from 'react-icons/hi';
 
 export default function PhotosEmptyState() {
-  const renderLink = (href: string) =>
-    <Link
-      href={href}
-      className="hover:underline hover:text-main"
-    >
-      {href}
-    </Link>;
-
   return (
     <SiteGrid
       contentMain={
-        <InfoBlock padding="loose">
+        <InfoBlock
+          className="min-h-[20rem] sm:min-h-[30rem] px-8"
+          padding="loose"
+        >
           <HiOutlinePhotograph
             className="text-medium"
             size={24}
@@ -27,23 +24,33 @@ export default function PhotosEmptyState() {
             'font-bold text-2xl',
             'text-gray-700 dark:text-gray-200',
           )}>
-            {!IS_SITE_READY ? 'Finish Setup' : 'Welcome!'}
+            {!IS_SITE_READY ? 'Finish Setup' : 'Setup Complete!'}
           </div>
           {!IS_SITE_READY
             ? <SiteChecklist />
-            : <div className="max-w-md leading-relaxed text-center">
-              <div className="mb-3">
-                1. Visit
-                {' '}
-                {renderLink('/admin/photos')}
-                {' '}
-                to add your first photo
+            : <div className="max-w-md text-center space-y-6">
+              <div className="space-y-2">
+                <div>
+                  Add your first photo:
+                </div>
+                <Link
+                  href={PATH_ADMIN_PHOTOS}
+                  className="button primary"
+                >
+                  <span>Admin Dashboard</span>
+                  <FaArrowRight size={10} />
+                </Link>
               </div>
               <div>
-                2. Change the name of this blog and other configuration
+                Change the name of this blog and other configuration
                 by editing environment variables referenced in
                 {' '}
-                {renderLink('/admin/configuration')}
+                <Link
+                  href={PATH_ADMIN_CONFIGURATION}
+                  className="text-main hover:underline"
+                >
+                  /admin/configuration
+                </Link>
               </div>
             </div>}
         </InfoBlock>}