78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
'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 (
|
||
<>
|
||
{isAuthenticated && (
|
||
<div className="sticky top-0 z-50 bg-amber-50 dark:bg-amber-900/40 border-b border-amber-200/70 dark:border-amber-800/60 backdrop-blur">
|
||
<div className={`${maxWidth} mx-auto py-3 px-4 sm:px-6 lg:px-8`}>
|
||
<p className="text-center text-sm text-amber-900 dark:text-amber-100">
|
||
⚠️ Atenção: visualizar listas públicas pode estragar surpresas
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="relative overflow-hidden">
|
||
{/* Subtle floating planet glyph */}
|
||
<div
|
||
aria-hidden
|
||
className="pointer-events-none absolute -top-12 -right-10 w-56 h-56 rounded-full opacity-60 blur-2xl"
|
||
style={{
|
||
background:
|
||
'radial-gradient(circle at 30% 30%, var(--halo-1), transparent 60%), radial-gradient(circle at 70% 70%, var(--halo-2), transparent 60%)',
|
||
}}
|
||
/>
|
||
<div
|
||
aria-hidden
|
||
className="pointer-events-none absolute -bottom-16 -left-10 w-72 h-72 rounded-full opacity-50 blur-3xl"
|
||
style={{
|
||
background: 'radial-gradient(circle, var(--halo-3), transparent 60%)',
|
||
}}
|
||
/>
|
||
|
||
<div className={`${maxWidth} mx-auto relative py-14 px-4 sm:py-20 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-56 flex-shrink-0">
|
||
<img
|
||
src={imageUrl}
|
||
alt={title}
|
||
className="w-56 h-56 object-cover rounded-3xl shadow-lifted ring-1 ring-[color:var(--border)]"
|
||
/>
|
||
</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-[color:var(--ink)] mb-4 leading-tight">
|
||
{title}
|
||
</h1>
|
||
{subtitle && (
|
||
<p className={`text-xl sm:text-2xl text-[color:var(--ink-soft)] 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>
|
||
</>
|
||
);
|
||
}
|