From a211e8eb58b73ffc2040bd5233f6cd49e8bc2eae Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Sun, 5 Feb 2023 21:49:23 +0000
Subject: [PATCH] Extracted icons into separate components

---
 components/{Feature.tsx => Cta.tsx}  |  0
 components/Header.tsx                | 67 ++--------------------------
 components/icons/ChevronDownIcon.tsx | 15 +++++++
 components/icons/CloseIcon.tsx       | 16 +++++++
 components/icons/MoonIcon.tsx        | 14 ++++++
 components/icons/SunIcon.tsx         | 21 +++++++++
 6 files changed, 70 insertions(+), 63 deletions(-)
 rename components/{Feature.tsx => Cta.tsx} (100%)
 create mode 100644 components/icons/ChevronDownIcon.tsx
 create mode 100644 components/icons/CloseIcon.tsx
 create mode 100644 components/icons/MoonIcon.tsx
 create mode 100644 components/icons/SunIcon.tsx

diff --git a/components/Feature.tsx b/components/Cta.tsx
similarity index 100%
rename from components/Feature.tsx
rename to components/Cta.tsx
diff --git a/components/Header.tsx b/components/Header.tsx
index 9986352..e3413da 100644
--- a/components/Header.tsx
+++ b/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 (
diff --git a/components/icons/ChevronDownIcon.tsx b/components/icons/ChevronDownIcon.tsx
new file mode 100644
index 0000000..553fe22
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/components/icons/CloseIcon.tsx b/components/icons/CloseIcon.tsx
new file mode 100644
index 0000000..b3dd707
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/components/icons/MoonIcon.tsx b/components/icons/MoonIcon.tsx
new file mode 100644
index 0000000..e35e883
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/components/icons/SunIcon.tsx b/components/icons/SunIcon.tsx
new file mode 100644
index 0000000..c861393
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file