Extracted icons into separate components

components/Header.tsx

@@ -4,73 +4,14 @@ import {usePathname} from 'next/navigation'
 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 {ChevronDownIcon} from '@/components/icons/ChevronDownIcon'
+import {MoonIcon} from '@/components/icons/MoonIcon'
+import {SunIcon} from '@/components/icons/SunIcon'
 import avatar from '@/public/static/images/avatar.jpg'
-
 import type {Props} from 'types'
 
-function CloseIcon(props: Props) {
-    return (
-        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-            <path
-                d="m17.25 6.75-10.5 10.5M6.75 6.75l10.5 10.5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            />
-        </svg>
-    )
-}
-
-function ChevronDownIcon(props: Props) {
-    return (
-        <svg viewBox="0 0 8 6" aria-hidden="true" {...props}>
-            <path
-                d="M1.75 1.75 4 4.25l2.25-2.5"
-                fill="none"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            />
-        </svg>
-    )
-}
-
-function SunIcon(props: Props) {
-    return (
-        <svg
-            viewBox="0 0 24 24"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-            {...props}
-        >
-            <path
-                d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z"/>
-            <path
-                d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061"
-                fill="none"
-            />
-        </svg>
-    )
-}
-
-function MoonIcon(props: Props) {
-    return (
-        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-            <path
-                d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            />
-        </svg>
-    )
-}
 
 function MobileNavItem({href, children}: { href: string } & Props) {
     return (

components/icons/ChevronDownIcon.tsx

@@ -0,0 +1,15 @@
+import {Props} from '@/types'
+
+export function ChevronDownIcon(props: Props) {
+    return (
+        <svg viewBox="0 0 8 6" aria-hidden="true" {...props}>
+            <path
+                d="M1.75 1.75 4 4.25l2.25-2.5"
+                fill="none"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    )
+}

components/icons/CloseIcon.tsx

@@ -0,0 +1,16 @@
+import {Props} from '@/types'
+
+export function CloseIcon(props: Props) {
+    return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+            <path
+                d="m17.25 6.75-10.5 10.5M6.75 6.75l10.5 10.5"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    )
+}

components/icons/MoonIcon.tsx

@@ -0,0 +1,14 @@
+import {Props} from '@/types'
+
+export function MoonIcon(props: Props) {
+    return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+            <path
+                d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    )
+}

components/icons/SunIcon.tsx

@@ -0,0 +1,21 @@
+import {Props} from '@/types'
+
+export function SunIcon(props: Props) {
+    return (
+        <svg
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            {...props}
+        >
+            <path
+                d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z"/>
+            <path
+                d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061"
+                fill="none"
+            />
+        </svg>
+    )
+}