Extracted MobileNavItem component

components/Header.tsx

@@ -5,24 +5,14 @@ import {Fragment, useEffect, useRef} from 'react'
 import {Popover, Transition} from '@headlessui/react'
 import clsx from 'clsx'
 import {Container} from './Container'
-import {CloseIcon} from '@/components/icons/CloseIcon'
+import {MobileNavItem} from './MobileNavItem'
-import {ChevronDownIcon} from '@/components/icons/ChevronDownIcon'
+import {CloseIcon} from './icons/CloseIcon'
-import {MoonIcon} from '@/components/icons/MoonIcon'
+import {ChevronDownIcon} from './icons/ChevronDownIcon'
-import {SunIcon} from '@/components/icons/SunIcon'
+import {MoonIcon} from './icons/MoonIcon'
+import {SunIcon} from './icons/SunIcon'
 import avatar from '@/public/static/images/avatar.jpg'
 import type {Props} from 'types'
 
-
-function MobileNavItem({href, children}: { href: string } & Props) {
-    return (
-        <li>
-            <Popover.Button as={Link} href={href} className="block py-2">
-                {children}
-            </Popover.Button>
-        </li>
-    )
-}
-
 function MobileNavigation(props: Props) {
     return (
         <Popover {...props}>

components/MobileNavItem.tsx

@@ -0,0 +1,13 @@
+import {Props} from '@/types';
+import {Popover} from '@headlessui/react'
+import Link from 'next/link'
+
+export function MobileNavItem({href, children}: { href: string } & Props) {
+    return (
+        <li>
+            <Popover.Button as={Link} href={href} className="block py-2">
+                {children}
+            </Popover.Button>
+        </li>
+    )
+}