fix: basic example

Author: himself65

examples/basic/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'plugin:@next/next/recommended'
+}

examples/basic/next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   optimizeFonts: true,
+  images: {
+    domains: ['i.imgur.com']
+  },
   experimental: {
     externalDir: true
   }

examples/basic/package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^12.3.1",
     "@textea/dev-kit": "^0.13.4",
     "@types/node": "^18.7.18",
     "@types/react": "^18.0.20",

examples/basic/pages/index.tsx

@@ -12,6 +12,7 @@ import {
   JsonViewerOnChange,
   JsonViewerTheme
 } from '@textea/json-viewer'
+import Image from 'next/image'
 import type React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -102,6 +103,7 @@ const IndexPage: React.FC = () => {
   return (
     <div>
       <TextField
+        label='indentWidth'
         value={indent}
         type='number'
         onChange={
@@ -114,6 +116,7 @@ const IndexPage: React.FC = () => {
         }
       />
       <TextField
+        label='groupArraysAfterLength'
         value={groupArraysAfterLength}
         type='number'
         onChange={
@@ -157,7 +160,7 @@ const IndexPage: React.FC = () => {
             is: (value): value is string => typeof value === 'string' &&
               value.startsWith('https://i.imgur.com'),
             Component: (props) => {
-              return <img height='50px' src={props.value} alt={props.value}/>
+              return <Image height={50} width={50} src={props.value} alt={props.value}/>
             }
           }
         ]}

src/hooks/useCopyToClipboard.ts

@@ -12,10 +12,11 @@ export function useClipboard ({ timeout = 2000 } = {}) {
   const copyTimeout = useRef<number | null>(null)
 
   const handleCopyResult = useCallback((value: boolean) => {
-    if (copyTimeout.current) {
-      clearTimeout(copyTimeout.current)
+    const current = copyTimeout.current
+    if (current) {
+      window.clearTimeout(current)
     }
-    copyTimeout.current = setTimeout(() => setCopied(false), timeout)
+    copyTimeout.current = window.setTimeout(() => setCopied(false), timeout)
     setCopied(value)
   }, [timeout])
 

yarn.lock

@@ -1130,6 +1130,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@next/eslint-plugin-next@npm:^12.3.1":
+  version: 12.3.1
+  resolution: "@next/eslint-plugin-next@npm:12.3.1"
+  dependencies:
+    glob: 7.1.7
+  checksum: 157b1126f016a0090b62f590d9c331c58221c4efaf3453c294a0d26e75497704617549480e9bba3ddaf278a355359133dd239c3960f684f2abe575553ec59a96
+  languageName: node
+  linkType: hard
+
 "@next/swc-android-arm-eabi@npm:12.3.0":
   version: 12.3.0
   resolution: "@next/swc-android-arm-eabi@npm:12.3.0"
@@ -1662,6 +1671,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@textea/json-viewer-example-basic@workspace:examples/basic"
   dependencies:
+    "@next/eslint-plugin-next": ^12.3.1
     "@textea/dev-kit": ^0.13.4
     "@textea/json-viewer": "workspace:^"
     "@types/node": ^18.7.18
@@ -4369,6 +4379,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:7.1.7":
+  version: 7.1.7
+  resolution: "glob@npm:7.1.7"
+  dependencies:
+    fs.realpath: ^1.0.0
+    inflight: ^1.0.4
+    inherits: 2
+    minimatch: ^3.0.4
+    once: ^1.3.0
+    path-is-absolute: ^1.0.0
+  checksum: b61f48973bbdcf5159997b0874a2165db572b368b931135832599875919c237fc05c12984e38fe828e69aa8a921eb0e8a4997266211c517c9cfaae8a93988bb8
+  languageName: node
+  linkType: hard
+
 "glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"