Create Header component to refactor

2025-10-20 11:37:02 +02:00 · 2025-10-20 11:37:02 +02:00 · 7af3144470
commit 7af3144470
parent 02036f7ef4
1 changed files with 103 additions and 0 deletions
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@ -0,0 +1,103 @@
+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>
+  )
+}