Show upload photo button for new admins

src/admin/AdminCTA.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import PhotoUpload from '@/photo/PhotoUpload';
+import { PATH_ADMIN_PHOTOS } from '@/site/paths';
+import { useAppState } from '@/state/AppState';
+import Link from 'next/link';
+import { FaArrowRight } from 'react-icons/fa';
+
+export default function AdminCTA() {
+  const { isUserSignedIn } = useAppState();
+
+  return (
+    <div className="flex justify-center pt-4">
+      {isUserSignedIn
+        ? <PhotoUpload showUploadStatus={false} />
+        : <Link
+          href={PATH_ADMIN_PHOTOS}
+          className="button primary"
+        >
+          <span>Admin Dashboard</span>
+          <FaArrowRight size={10} />
+        </Link>}
+    </div>
+  );
+}

src/components/ImageInput.tsx

@@ -19,6 +19,7 @@ export default function ImageInput({
   maxSize = MAX_IMAGE_SIZE,
   quality = 0.8,
   loading,
+  showUploadStatus = true,
   debug,
 }: {
   onStart?: () => void
@@ -32,6 +33,7 @@ export default function ImageInput({
   maxSize?: number
   quality?: number
   loading?: boolean
+  showUploadStatus?: boolean
   debug?: boolean
 }) {
   const ref = useRef<HTMLCanvasElement>(null);
@@ -62,7 +64,7 @@ export default function ImageInput({
             )}
             aria-disabled={loading}
           >
-            <span className="w-4 inline-flex items-center">
+            <span className="w-4 inline-flex items-center mr-1">
               {loading
                 ? <Spinner color="text" className="translate-y-[0.5px]" />
                 : <FiUploadCloud
@@ -219,7 +221,7 @@ export default function ImageInput({
             }}
           />
         </label>
-        {filesLength > 0 &&
+        {showUploadStatus && filesLength > 0 &&
           <div className="max-w-full truncate text-ellipsis">
             {uploadStatusText}
           </div>}

src/photo/PhotoUpload.tsx

@@ -10,10 +10,12 @@ import { clsx } from 'clsx/lite';
 export default function PhotoUpload({
   shouldResize,
   onLastUpload,
+  showUploadStatus,
   debug,
 }: {
   shouldResize?: boolean
   onLastUpload?: () => Promise<void>
+  showUploadStatus?: boolean
   debug?: boolean
 }) {
   const [isUploading, setIsUploading] = useState(false);
@@ -75,6 +77,7 @@ export default function PhotoUpload({
                   });
               }
             }}
+            showUploadStatus={showUploadStatus}
             debug={debug}
           />
         </form>

src/photo/PhotosEmptyState.tsx

@@ -1,11 +1,11 @@
+import AdminCTA from '@/admin/AdminCTA';
 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 { PATH_ADMIN_CONFIGURATION } 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() {
@@ -33,13 +33,7 @@ export default function PhotosEmptyState() {
                 <div>
                   Add your first photo:
                 </div>
-                <Link
+                <AdminCTA />
-                  href={PATH_ADMIN_PHOTOS}
-                  className="button primary"
-                >
-                  <span>Admin Dashboard</span>
-                  <FaArrowRight size={10} />
-                </Link>
               </div>
               <div>
                 Change the name of this blog and other configuration