From 57acb3d9f36144649aa80491ebaf77c1195b34a7 Mon Sep 17 00:00:00 2001
From: Nicolas Cantu <nicolas.cantu@pm.me>
Date: Tue, 13 Jan 2026 23:46:43 +0100
Subject: [PATCH] create for series

---
 components/ui/Card.tsx       |   2 +-
 components/ui/MobileMenu.tsx | 110 ++++++++++++++++++++++++-----------
 components/ui/Skeleton.tsx   |   2 +-
 3 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
index c3fb70c..9ba59bd 100644
--- a/components/ui/Card.tsx
+++ b/components/ui/Card.tsx
@@ -12,7 +12,7 @@ interface CardProps {
 
 function getVariantClasses(variant: CardVariant, hasOnClick: boolean): string {
   const baseClasses = 'border rounded-lg bg-cyber-dark'
-  
+
   switch (variant) {
     case 'default':
       return `${baseClasses} border-neon-cyan/30`
diff --git a/components/ui/MobileMenu.tsx b/components/ui/MobileMenu.tsx
index 4ece8df..5e0f93e 100644
--- a/components/ui/MobileMenu.tsx
+++ b/components/ui/MobileMenu.tsx
@@ -62,44 +62,84 @@ export function MobileMenu({ children, 'aria-label': ariaLabel }: MobileMenuProp
 
   return (
     <>
-      <button
+      <MobileMenuButton
+        isOpen={isOpen}
         onClick={() => setIsOpen(!isOpen)}
-        className="md:hidden text-cyber-accent hover:text-neon-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-neon-cyan rounded p-2"
-        aria-label={ariaLabel ?? 'Toggle menu'}
-        aria-expanded={isOpen}
-        aria-controls="mobile-menu"
-      >
-        <HamburgerIcon isOpen={isOpen} />
-      </button>
+        ariaLabel={ariaLabel ?? 'Toggle menu'}
+      />
       {isOpen && (
-        <>
-          <div
-            className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
-            onClick={() => setIsOpen(false)}
-            aria-hidden="true"
-          />
-          <div
-            id="mobile-menu"
-            className="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-cyber-dark border-l border-neon-cyan/30 shadow-glow-cyan z-50 transform transition-transform md:hidden overflow-y-auto"
-            role="dialog"
-            aria-modal="true"
-            aria-label={ariaLabel ?? 'Mobile menu'}
-          >
-            <div className="p-4">
-              <div className="flex justify-end mb-4">
-                <button
-                  onClick={() => setIsOpen(false)}
-                  className="text-cyber-accent hover:text-neon-cyan text-2xl transition-colors focus:outline-none focus:ring-2 focus:ring-neon-cyan rounded"
-                  aria-label="Close menu"
-                >
-                  ×
-                </button>
-              </div>
-              <div className="space-y-4">{children}</div>
-            </div>
-          </div>
-        </>
+        <MobileMenuDrawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          ariaLabel={ariaLabel ?? 'Mobile menu'}
+        >
+          {children}
+        </MobileMenuDrawer>
       )}
     </>
   )
 }
+
+function MobileMenuButton({
+  isOpen,
+  onClick,
+  ariaLabel,
+}: {
+  isOpen: boolean
+  onClick: () => void
+  ariaLabel: string
+}): React.ReactElement {
+  return (
+    <button
+      onClick={onClick}
+      className="md:hidden text-cyber-accent hover:text-neon-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-neon-cyan rounded p-2"
+      aria-label={ariaLabel}
+      aria-expanded={isOpen}
+      aria-controls="mobile-menu"
+    >
+      <HamburgerIcon isOpen={isOpen} />
+    </button>
+  )
+}
+
+function MobileMenuDrawer({
+  isOpen,
+  onClose,
+  ariaLabel,
+  children,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  ariaLabel: string
+  children: ReactNode
+}): React.ReactElement {
+  return (
+    <>
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        id="mobile-menu"
+        className="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-cyber-dark border-l border-neon-cyan/30 shadow-glow-cyan z-50 transform transition-transform md:hidden overflow-y-auto"
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+      >
+        <div className="p-4">
+          <div className="flex justify-end mb-4">
+            <button
+              onClick={onClose}
+              className="text-cyber-accent hover:text-neon-cyan text-2xl transition-colors focus:outline-none focus:ring-2 focus:ring-neon-cyan rounded"
+              aria-label="Close menu"
+            >
+              ×
+            </button>
+          </div>
+          <div className="space-y-4">{children}</div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/components/ui/Skeleton.tsx b/components/ui/Skeleton.tsx
index abb3f3a..4596fe6 100644
--- a/components/ui/Skeleton.tsx
+++ b/components/ui/Skeleton.tsx
@@ -26,7 +26,7 @@ export function Skeleton({
   const variantClasses = getVariantClasses(variant)
   const baseClasses = 'bg-cyber-light animate-pulse'
   const style: React.CSSProperties = {}
-  
+
   if (width) {
     style.width = typeof width === 'number' ? `${width}px` : width
   }