From fa95476f50b56c062d91a5d107d2a2f9dde30f75 Mon Sep 17 00:00:00 2001
From: Caleb Denio <cjdenio44@gmail.com>
Date: Wed, 3 Apr 2024 12:54:01 -0400
Subject: [PATCH] use a media query instead

---
 components/tilt.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/tilt.js b/components/tilt.js
index 76f4c233..e9d74dbc 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,12 +1,26 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import VanillaTilt from 'vanilla-tilt'
-import { useResponsiveValue } from '@theme-ui/match-media'
+
+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 }
+}
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
   const root = useRef(null)
 
-  const enabled = useResponsiveValue([false, true])
+  const { matches: enabled } = useMedia('(hover: hover)')
 
   useEffect(() => {
     if (enabled) {