refactor: extract <DropdownMenu />

Author: kantord

src/components/Header.tsx

@@ -10,6 +10,14 @@ function HeaderMenuItem({ children }: { children: React.ReactNode }) {
   );
 }
 
+function DropdownMenu({ children }: { children: React.ReactNode }) {
+  return (
+    <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">{children}</div>
+    </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">
@@ -32,41 +40,38 @@ export function Header({ hasError }: { hasError?: boolean }) {
       <div className="flex items-center gap-4 mr-16">
         <div className="flex items-center relative group">
           <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
-                to="/certificates"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Download
-              </Link>
-              <Link
-                to="/certificates/security"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Certificate Security
-              </Link>
-            </div>
-          </div>
+          <DropdownMenu>
+            <Link
+              to="/certificates"
+              className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+            >
+              Download
+            </Link>
+            <Link
+              to="/certificates/security"
+              className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+            >
+              Certificate Security
+            </Link>
+          </DropdownMenu>
         </div>
         <div className="flex items-center relative group">
           <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
-                to="/help/continue-setup"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Continue Setup
-              </Link>
-              <Link
-                to="/help/copilot-setup"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Copilot Setup
-              </Link>
-            </div>
-          </div>
+
+          <DropdownMenu>
+            <Link
+              to="/help/continue-setup"
+              className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+            >
+              Continue Setup
+            </Link>
+            <Link
+              to="/help/copilot-setup"
+              className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+            >
+              Copilot Setup
+            </Link>
+          </DropdownMenu>
         </div>
 
         <div className="flex items-center relative group">