Spaces:
Sleeping
Sleeping
| "use client"; | |
| import Link from 'next/link'; | |
| import { ArrowLeft, FileText, Sparkles } from 'lucide-react'; | |
| import { Button } from '@/components/ui/button'; | |
| interface AppHeaderProps { | |
| showBackButton?: boolean; | |
| backHref?: string; | |
| showDetailsButton?: boolean; | |
| onDetailsClick?: () => void; | |
| title?: string; | |
| showLogo?: boolean; | |
| } | |
| export function AppHeader({ | |
| showBackButton = false, | |
| backHref = '/', | |
| showDetailsButton = false, | |
| onDetailsClick, | |
| title, | |
| showLogo = false, // Default to false | |
| }: AppHeaderProps) { | |
| return ( | |
| <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> | |
| <div className="container flex h-16 items-center"> | |
| {/* Left content (Back button) */} | |
| <div className="flex items-center"> | |
| {showBackButton && ( | |
| <Button variant="ghost" size="icon" asChild className="mr-2"> | |
| <Link href={backHref} aria-label="Go back"> | |
| <ArrowLeft className="h-5 w-5" /> | |
| </Link> | |
| </Button> | |
| )} | |
| </div> | |
| {/* Middle content (Title or flex-1 placeholder for balance) */} | |
| {title ? ( | |
| <h1 className="flex-1 truncate px-4 text-center font-headline text-lg font-semibold">{title}</h1> | |
| ) : ( | |
| <div className="flex-1"></div> // Ensures right content is pushed to the right even without a title | |
| )} | |
| {/* Right content (Details Button, JourneyAI Logo) */} | |
| <div className="ml-auto flex items-center space-x-4"> | |
| {showDetailsButton && onDetailsClick && ( | |
| <Button variant="outline" onClick={onDetailsClick} aria-label="View Details"> | |
| <FileText className="mr-2 h-4 w-4" /> | |
| Details | |
| </Button> | |
| )} | |
| {showLogo && ( | |
| <Link href="/" className="flex items-center space-x-2"> | |
| <Sparkles className="h-6 w-6 text-primary" /> | |
| <span className="font-headline text-xl font-bold">JourneyAI</span> | |
| </Link> | |
| )} | |
| </div> | |
| </div> | |
| </header> | |
| ); | |
| } | |