From 05f1dfc6896d3affa7c494a1b955f230d836a4b7 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 27 Oct 2023 18:07:45 +0200
Subject: feat: replace next-themes with a custom ThemeProvider

To be honest, next-themes was working fine. However since I use a theme
provider for Prism code blocks, some code is duplicated between this
app and the library. So I prefer to use a custom Provider without the
options I don't need.
---
 src/utils/hooks/use-match-media/index.ts           |  1 +
 src/utils/hooks/use-match-media/use-match-media.ts | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 src/utils/hooks/use-match-media/index.ts
 create mode 100644 src/utils/hooks/use-match-media/use-match-media.ts

(limited to 'src/utils/hooks/use-match-media')

diff --git a/src/utils/hooks/use-match-media/index.ts b/src/utils/hooks/use-match-media/index.ts
new file mode 100644
index 0000000..7d79e64
--- /dev/null
+++ b/src/utils/hooks/use-match-media/index.ts
@@ -0,0 +1 @@
+export * from './use-match-media';
diff --git a/src/utils/hooks/use-match-media/use-match-media.ts b/src/utils/hooks/use-match-media/use-match-media.ts
new file mode 100644
index 0000000..50ac038
--- /dev/null
+++ b/src/utils/hooks/use-match-media/use-match-media.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+export type UseMatchMediaCallback = (ev: MediaQueryListEvent) => void;
+
+/**
+ * React hook to watch for media changes based on the given query.
+ *
+ * @param {string} query - A media query.
+ * @param {UseMatchMediaCallback} cb - A callback function to execute on change.
+ */
+export const useMatchMedia = (query: string, cb: UseMatchMediaCallback) => {
+  useEffect(() => {
+    window.matchMedia(query).addEventListener('change', cb);
+
+    return () => window.matchMedia(query).removeEventListener('change', cb);
+  }, [cb, query]);
+};
-- 
cgit v1.2.3