refactor: make header menu code slightly more manageable (#78)

* refactor: extract <HeaderMenuItem />

* refactor: extract <DropdownMenu />

* refactor: extract <DropdownMenuItem />

* chore: add prettier

Author: kantord

package-lock.json

@@ -71,6 +71,7 @@
     "lint-staged": "^15.3.0",
     "msw": "^2.7.0",
     "postcss": "^8.4.49",
+    "prettier": "3.4.2",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.15.0",

package.json

@@ -2,6 +2,36 @@ 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>
+  );
+}
+
+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>
+  );
+}
+
+function DropdownMenuItem({
+  children,
+  to,
+}: {
+  to: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link to={to} className="block px-5 py-3 text-gray-700 hover:bg-blue-50">
+      {children}
+    </Link>
+  );
+}
+
 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,46 +53,25 @@ 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>
-          <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>
+          <HeaderMenuItem>Certificates</HeaderMenuItem>
+          <DropdownMenu>
+            <DropdownMenuItem to="/certificates">Download</DropdownMenuItem>
+            <DropdownMenuItem to="/certificates/security">
+              Certificate Security
+            </DropdownMenuItem>
+          </DropdownMenu>
         </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>
-          <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>
+          <HeaderMenuItem>Help</HeaderMenuItem>
+          <DropdownMenu>
+            <DropdownMenuItem to="/help/continue-setup">
+              Continue Setup
+            </DropdownMenuItem>
+            <DropdownMenuItem to="/help/copilot-setup">
+              Copilot Setup
+            </DropdownMenuItem>
+          </DropdownMenu>
         </div>
 
         <div className="flex items-center relative group">