update

push-to-prod-ai · Mar 4, 2025 · b13d3c8 · b13d3c8
1 parent d0e8242
commit b13d3c8
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 171 deletions.
diff --git a/frontend-app/src/app/error/page.tsx b/frontend-app/src/app/error/page.tsx
diff --git a/frontend-app/src/components/Header.tsx b/frontend-app/src/components/Header.tsx
@@ -5,10 +5,56 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useState } from 'react';
 
+// Create a type for external links
+interface ExternalLink {
+  label: string;
+  url: string;
+}
+
+// Create a ProfileImage component to better organize the code
+function ProfileImage({ src, alt }: { src: string; alt: string }) {
+  const [imageError, setImageError] = useState(false);
+
+  if (imageError) {
+    return (
+      <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+        <span className="text-xs text-gray-500">{alt.charAt(0)}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative w-8 h-8 rounded-full overflow-hidden">
+      <Image 
+        src={src} 
+        alt={alt} 
+        fill
+        sizes="32px"
+        className="object-cover"
+        priority
+        onError={() => setImageError(true)}
+      />
+    </div>
+  );
+}
+
 export default function Header() {
   const { data: session, status } = useSession();
-  const [setImageError] = useState(false);
+
+  // Define external links for cleaner rendering
+  const externalLinks: ExternalLink[] = [
+    {
+      label: 'Docs',
+      url: 'https://github.com/push-to-prod-ai/push-to-prod'
+    },
+    {
+      label: 'Support',
+      url: 'https://github.com/push-to-prod-ai/push-to-prod/issues'
+    }
+  ];
 
+  const isAuthenticated = status === 'authenticated' && !!session?.user;
+
   return (
     <header className="bg-white shadow-sm">
       <div className="container mx-auto px-4 py-4 flex items-center justify-between">
@@ -17,42 +63,30 @@ export default function Header() {
         </div>
         <nav>
           <ul className="flex space-x-6 items-center">
-            <li>
-              <a 
-                href="https://github.com/push-to-prod-ai/push-to-prod" 
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-600 hover:text-gray-900"
-              >
-                Docs
-              </a>
-            </li>
-            <li>
-              <a 
-                href="https://github.com/push-to-prod-ai/push-to-prod/issues" 
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-600 hover:text-gray-900"
-              >
-                Support
-              </a>
-            </li>
-            {status === 'authenticated' && session?.user && (
+            {/* External links */}
+            {externalLinks.map((link) => (
+              <li key={link.label}>
+                <a 
+                  href={link.url} 
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-600 hover:text-gray-900"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+
+            {/* Auth-dependent content */}
+            {isAuthenticated ? (
               <>
                 <li className="flex items-center">
                   <div className="flex items-center space-x-2">
                     {session.user.image && (
-                      <div className="relative w-8 h-8 rounded-full overflow-hidden">
-                          <Image 
-                            src={session.user.image} 
-                            alt={session.user.name || 'User'} 
-                            fill
-                            sizes="32px"
-                            className="object-cover"
-                            priority
-                            onError={() => setImageError(true)}
-                          />
-                      </div>
+                      <ProfileImage 
+                        src={session.user.image} 
+                        alt={session.user.name || 'User'} 
+                      />
                     )}
                     <span className="text-sm text-gray-700">{session.user.name}</span>
                   </div>
@@ -66,8 +100,7 @@ export default function Header() {
                   </button>
                 </li>
               </>
-            )}
-            {status === 'unauthenticated' && (
+            ) : status === 'unauthenticated' && (
               <li>
                 <Link href="/auth/signin" className="text-blue-600 hover:text-blue-800">
                   Sign in