Initial commit

components/header.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useAuth } from '@/lib/auth-context';
+
+interface HeaderProps {
+  title: string;
+  subtitle?: string;
+  imageUrl?: string;
+  actions?: React.ReactNode;
+  maxWidth?: 'max-w-5xl' | 'max-w-7xl';
+}
+
+export default function Header({ title, subtitle, imageUrl, actions, maxWidth = 'max-w-7xl' }: HeaderProps) {
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <>
+      {/* Admin Warning */}
+      {isAuthenticated && (
+        <div className="sticky top-0 z-50 bg-yellow-50 dark:bg-yellow-900 border-b border-yellow-200 dark:border-yellow-800">
+          <div className={`${maxWidth} mx-auto py-3 px-4 sm:px-6 lg:px-8`}>
+            <p className="text-center text-sm text-yellow-800 dark:text-yellow-200">
+              ⚠️ Warning: Viewing public wishlists may spoil surprises
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Hero Section */}
+      <div className="bg-white dark:bg-gray-800 shadow-sm">
+        <div className={`${maxWidth} mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8`}>
+          <div className="flex flex-col md:flex-row items-center md:items-start gap-8">
+            {imageUrl && (
+              <div className="md:w-64 flex-shrink-0">
+                <img
+                  src={imageUrl}
+                  alt={title}
+                  className="w-64 h-64 object-cover rounded-lg shadow-lg"
+                />
+              </div>
+            )}
+            <div className={imageUrl ? 'flex-1 text-left' : 'flex-1 text-center'}>
+              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 dark:text-white mb-4">
+                {title}
+              </h1>
+              {subtitle && (
+                <p className={`text-xl sm:text-2xl text-gray-600 dark:text-gray-300 mb-6 ${imageUrl ? '' : 'max-w-3xl mx-auto'}`}>
+                  {subtitle}
+                </p>
+              )}
+              {actions && (
+                <div className={`flex flex-col sm:flex-row items-center gap-3 ${imageUrl ? 'justify-start' : 'justify-center'}`}>
+                  {actions}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}