From 09441cffce613e628f39d0f67898e337127b2ab6 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Mon, 15 May 2023 15:51:36 +0100
Subject: [PATCH] feat: extend document to ignore startViewTransition type
 error

---
 src/app/(home)/page.tsx  | 2 +-
 src/hooks/useDarkMode.ts | 6 ++++--
 src/lib/utils.ts         | 5 -----
 types/global.d.ts        | 4 ++++
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index a6360241..4187e3c4 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -214,7 +214,7 @@ async function Home() {
               <ul className="pt-10 grid grid-cols-1 sm:grid-cols-3 gap-8">
                 {feature.subfeatures.map((item) => (
                   <li
-                    className="border rounded-xl overflow-hidden bg-white hover:shadow-md hover:scale-105 cursor-pointer transition duration-300 cursor-default"
+                    className="border rounded-xl overflow-hidden bg-white hover:shadow-md hover:scale-105 transition duration-300 cursor-default"
                     key={item.title}
                   >
                     {item.screenshot?.src && (
diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
index 6915f0f9..0b36c93f 100644
--- a/src/hooks/useDarkMode.ts
+++ b/src/hooks/useDarkMode.ts
@@ -3,7 +3,7 @@ import { create } from "zustand"
 
 import { noop } from "~/lib/noop"
 import { delStorage, getStorage, setStorage } from "~/lib/storage"
-import { isServerSide, isViewTransition } from "~/lib/utils"
+import { isServerSide } from "~/lib/utils"
 
 import { useGetState } from "./useGetState"
 
@@ -183,7 +183,9 @@ export const useDarkMode = () => {
     storageKey: darkModeKey,
     element: (globalThis.document && document.documentElement) || mockElement,
     transition:
-      !isServerSide() && isViewTransition() // @ts-ignore
+      !isServerSide() &&
+      !!document.startViewTransition &&
+      !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches
         ? document.startViewTransition()
         : undefined,
   })
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 938223b7..e100112a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -26,11 +26,6 @@ export function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
 
 export const isServerSide = () => typeof window === "undefined"
 
-export const isViewTransition = () =>
-  // @ts-ignore
-  !!document.startViewTransition &&
-  !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches
-
 export const throttle = (func: Function, limit: number) => {
   let inThrottle: boolean
   return function () {
diff --git a/types/global.d.ts b/types/global.d.ts
index aa550b75..4a6b454c 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -11,4 +11,8 @@ declare global {
   }
 
   var prisma: PrismaClient | undefined
+
+  interface Document {
+    startViewTransition(): void
+  }
 }