104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Shield, ArrowLeft } from "lucide-react"
|
|
|
|
interface HeaderProps {
|
|
variant?: 'default' | 'dark' | 'dashboard'
|
|
showAuth?: boolean
|
|
showBackButton?: boolean
|
|
backHref?: string
|
|
backText?: string
|
|
onAuthClick?: () => void
|
|
}
|
|
|
|
export default function Header({
|
|
variant = 'default',
|
|
showAuth = true,
|
|
showBackButton = false,
|
|
backHref = "/",
|
|
backText = "Retour à l'accueil",
|
|
onAuthClick
|
|
}: HeaderProps) {
|
|
const getHeaderStyles = () => {
|
|
switch (variant) {
|
|
case 'dark':
|
|
return "border-b border-gray-700 bg-gray-800/80 backdrop-blur-sm"
|
|
case 'dashboard':
|
|
return "border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
|
|
default:
|
|
return "border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm sticky top-0 z-50 transition-colors duration-300"
|
|
}
|
|
}
|
|
|
|
const getLogoStyles = () => {
|
|
switch (variant) {
|
|
case 'dark':
|
|
return {
|
|
shield: "h-8 w-8 text-blue-400",
|
|
text: "text-2xl font-bold text-gray-100",
|
|
badge: "ml-2 bg-gray-700 text-gray-200"
|
|
}
|
|
case 'dashboard':
|
|
return {
|
|
shield: "h-8 w-8 text-blue-600 dark:text-blue-400",
|
|
text: "text-xl font-bold text-gray-900 dark:text-gray-100",
|
|
badge: "ml-2"
|
|
}
|
|
default:
|
|
return {
|
|
shield: "h-8 w-8 text-blue-600 dark:text-blue-400",
|
|
text: "text-2xl font-bold text-gray-900 dark:text-gray-100",
|
|
badge: "ml-2"
|
|
}
|
|
}
|
|
}
|
|
|
|
const logoStyles = getLogoStyles()
|
|
|
|
return (
|
|
<header className={getHeaderStyles()}>
|
|
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<Shield className={logoStyles.shield} />
|
|
<span className={logoStyles.text}>DocV</span>
|
|
<Badge variant="secondary" className={logoStyles.badge}>
|
|
By 4NK
|
|
</Badge>
|
|
</Link>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
{showBackButton && (
|
|
<Link href={backHref} className="flex items-center text-blue-400 hover:text-blue-500">
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
{backText}
|
|
</Link>
|
|
)}
|
|
|
|
{showAuth && variant === 'default' && (
|
|
<nav className="hidden md:flex items-center space-x-6">
|
|
<Link href="#produit" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">
|
|
Le produit
|
|
</Link>
|
|
<Link href="#securite" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">
|
|
Sécurité
|
|
</Link>
|
|
<Link href="#tarifs" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">
|
|
Tarifs
|
|
</Link>
|
|
<Link href="/formation">
|
|
<Button variant="outline" className="dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 transition-colors duration-300">
|
|
Formation
|
|
</Button>
|
|
</Link>
|
|
<Button onClick={onAuthClick} className="dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300">
|
|
Connexion
|
|
</Button>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|