refactor: extract <HeaderMenuItem />

kantord · kantord · commit 9eb2021cf45f · 2025-01-15T14:44:34.000+01:00
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,6 +2,14 @@ import { Link } from "react-router-dom";
 import { SidebarTrigger } from "./ui/sidebar";
 import { Separator } from "./ui/separator";
 
+function HeaderMenuItem({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
+      {children}
+    </div>
+  );
+}
+
 export function Header({ hasError }: { hasError?: boolean }) {
   return (
     <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b">
@@ -23,9 +31,7 @@ export function Header({ hasError }: { hasError?: boolean }) {
       </div>
       <div className="flex items-center gap-4 mr-16">
         <div className="flex items-center relative group">
-          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
-            Certificates
-          </div>
+          <HeaderMenuItem>Certificates</HeaderMenuItem>
           <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
             <div className="py-1">
               <Link
@@ -44,9 +50,7 @@ export function Header({ hasError }: { hasError?: boolean }) {
           </div>
         </div>
         <div className="flex items-center relative group">
-          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
-            Help
-          </div>
+          <HeaderMenuItem>Help</HeaderMenuItem>
           <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
             <div className="py-1">
               <Link
