From 33327f7c0a309a965184040ecbec409066130977 Mon Sep 17 00:00:00 2001
From: Caleb Denio <cjdenio44@gmail.com>
Date: Wed, 3 Apr 2024 14:33:12 -0400
Subject: [PATCH] Move `useMedia` to own file

---
 components/tilt.js | 18 ++----------------
 lib/use-media.js   | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 lib/use-media.js

diff --git a/components/tilt.js b/components/tilt.js
index e9d74dbc..71fdfd00 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,20 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import VanillaTilt from 'vanilla-tilt'
-
-function useMedia(query) {
-  const [matches, setMatches] = useState(false)
-
-  useEffect(() => {
-    const onChange = e => setMatches(e.matches)
-    const mq = window.matchMedia(query)
-    setMatches(mq.matches)
-    mq.addEventListener('change', onChange)
-
-    return () => mq.removeEventListener('change', onChange)
-  }, [query])
-
-  return { matches }
-}
+import useMedia from '../lib/use-media'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
diff --git a/lib/use-media.js b/lib/use-media.js
new file mode 100644
index 00000000..d801a8a3
--- /dev/null
+++ b/lib/use-media.js
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react'
+
+export default function useMedia(query) {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const onChange = e => setMatches(e.matches)
+    const mq = window.matchMedia(query)
+    setMatches(mq.matches)
+    mq.addEventListener('change', onChange)
+
+    return () => mq.removeEventListener('change', onChange)
+  }, [query])
+
+  return { matches }
+}