'use client' import { useState } from 'react' import Link from 'next/link' import { Menu, X, Github, ChevronDown } from 'lucide-react' type HeaderProps = { variant?: 'simple' | 'modern' | 'minimal' | 'bordered' } const navigation = [ { name: 'Components', href: '/components' }, { name: 'Templates', href: '/templates' }, { name: 'Documentation', href: '/docs' }, ] // Simple Header export function SimpleHeader() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

Snippets

{navigation.map((item) => ( {item.name} ))} Sign In

{isMenuOpen && (

{navigation.map((item) => ( {item.name} ))} Sign In

)}

) } // Modern Header export function ModernHeader() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

Snippets

{navigation.map((item) => ( {item.name} ))} Sign In

{isMenuOpen && (

{navigation.map((item) => ( {item.name} ))}

)}

) } // Minimal Header export function MinimalHeader() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

Snippets

{navigation.map((item) => ( {item.name} ))} Sign In →

{isMenuOpen && (

{navigation.map((item) => ( {item.name} ))} Sign In

)}

) } // Bordered Header export function BorderedHeader() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

Snippets

{navigation.map((item) => ( {item.name} ))}

{isMenuOpen && (

{navigation.map((item) => ( {item.name} ))} Sign In

)}

) } export default function HeaderPage() { return (

) }

Navbar Collections