From b3fe93a564ef81a31ba67188a3ea75f1ee628100 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Mon, 26 Feb 2024 13:53:06 +0100
Subject: [PATCH] refactor(layout): create header component

---
 src/components/layout/Header.astro | 29 +++++++++++++++++++++++++++++
 src/layouts/BaseLayout.astro       | 27 ++-------------------------
 2 files changed, 31 insertions(+), 25 deletions(-)
 create mode 100644 src/components/layout/Header.astro
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
new file mode 100644
index 0000000..fa63692
--- /dev/null
+++ b/src/components/layout/Header.astro
@@ -0,0 +1,29 @@
+---
+import '@/styles/globals.css';
+import { ModeToggle } from '@/components/ModeToggle';
+---
+
+<script is:inline>
+	const getThemePreference = () => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	};
+	const isDark = getThemePreference() === 'dark';
+	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+
+	if (typeof localStorage !== 'undefined') {
+		const observer = new MutationObserver(() => {
+			const isDark = document.documentElement.classList.contains('dark');
+			localStorage.setItem('theme', isDark ? 'dark' : 'light');
+		});
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+	}
+</script>
+
+<header class="relative overflow-hidden bg-white dark:bg-gray-900 dark:text-gray-100">
+	<div class="flex items-center justify-center py-4 dark:text-white">
+		<ModeToggle client:load />
+	</div>
+</header>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b323107..e9ec3f8 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,29 +1,8 @@
 ---
-import '@/styles/globals.css';
-import { ModeToggle } from '@/components/ModeToggle';
-
+import Header from '@/components/layout/Header.astro';
 const { title } = Astro.props;
 ---
 
-<script is:inline>
-	const getThemePreference = () => {
-		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-			return localStorage.getItem('theme');
-		}
-		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-	};
-	const isDark = getThemePreference() === 'dark';
-	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
-
-	if (typeof localStorage !== 'undefined') {
-		const observer = new MutationObserver(() => {
-			const isDark = document.documentElement.classList.contains('dark');
-			localStorage.setItem('theme', isDark ? 'dark' : 'light');
-		});
-		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-	}
-</script>
-
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
@@ -35,9 +14,7 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body class="dark:bg-black">
-		<div class="flex items-center justify-center pt-4 dark:text-white">
-			<ModeToggle client:load />
-		</div>
+		<Header />
 		<main>
 			<slot />
 		</main>
