Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | 1x 1x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 7x 7x 7x 81x 81x 81x 81x 81x 81x 81x 81x 81x 81x 81x 81x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x 88x | 'use client';
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { ArrowRight, Menu, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface PublicHeaderProps {
showBack?: boolean;
isLoggedIn?: boolean;
}
export function PublicHeader({ showBack, isLoggedIn }: PublicHeaderProps) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
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 justify-between gap-4">
<Link href="/" className="flex shrink-0 items-center gap-2">
<Image src="/logo-3.png" width={32} height={32} alt="ProofID" />
<span className="gradient-text text-xl font-bold">ProofID</span>
</Link>
{/* Desktop Nav */}
<nav className="hidden items-center gap-1 sm:flex sm:gap-2">
<Link
href="/professionals"
className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
>
Professionals
</Link>
<Link
href="/pricing"
className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
>
Pricing
</Link>
<Link
href="/about"
className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
>
About
</Link>
<Link
href="/blog"
className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
>
Blogs
</Link>
{isLoggedIn ? (
<Button asChild size="sm" variant="ghost">
<Link href="/dashboard">Dashboard</Link>
</Button>
) : (
<>
<Link
href="/login"
className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
>
Login
</Link>
<Button asChild size="sm">
<Link href="/login">
Get Started
<ArrowRight className="ml-1.5 h-4 w-4" />
</Link>
</Button>
</>
)}
</nav>
{/* Mobile Menu Button */}
<div className="flex items-center gap-2 sm:hidden">
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground"
>
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</button>
</div>
</div>
{/* Mobile Menu */}
{mobileMenuOpen && (
<div className="border-t bg-background p-4 sm:hidden">
<nav className="flex flex-col gap-2">
<Link
href="/professionals"
className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
onClick={() => setMobileMenuOpen(false)}
>
Professionals
</Link>
<Link
href="/pricing"
className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
onClick={() => setMobileMenuOpen(false)}
>
Pricing
</Link>
<Link
href="/about"
className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
onClick={() => setMobileMenuOpen(false)}
>
About
</Link>
<Link
href="/blog"
className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
onClick={() => setMobileMenuOpen(false)}
>
Blogs
</Link>
<div className="mt-2 flex flex-col gap-2 border-t pt-2">
{isLoggedIn ? (
<Button asChild size="sm" variant="outline">
<Link href="/dashboard">Dashboard</Link>
</Button>
) : (
<>
<Button asChild size="sm" variant="outline">
<Link href="/login">Login</Link>
</Button>
<Button asChild size="sm">
<Link href="/login">
Get Started
<ArrowRight className="ml-1.5 h-4 w-4" />
</Link>
</Button>
</>
)}
</div>
</nav>
</div>
)}
</header>
);
}
|