fix: types error

Author: DIYgod

src/components/ui/Input.tsx

@@ -5,7 +5,7 @@ import { FieldLabel } from "./FieldLabel"
 type InputProps<TMultiline extends boolean> = {
   label?: string
   addon?: string
-  prefix?: JSX.Element
+  prefixEle?: JSX.Element
   isBlock?: boolean
   error?: string
   help?: React.ReactNode
@@ -18,7 +18,7 @@ export const Input = forwardRef(function Input<
   {
     label,
     addon,
-    prefix,
+    prefixEle,
     className,
     isBlock,
     error,
@@ -31,15 +31,15 @@ export const Input = forwardRef(function Input<
     : React.ForwardedRef<HTMLInputElement>,
 ) {
   const hasAddon = !!addon
-  const hasPrefix = !!prefix
+  const hasPrefix = !!prefixEle
   const Component = (multiline ? "textarea" : "input") as any
 
   return (
     <div>
       {label && <FieldLabel label={label} id={inputProps.id} />}
       <div className="flex items-center relative">
-        {prefix && (
-          <span className="text-gray-600 absolute left-3">{prefix}</span>
+        {prefixEle && (
+          <span className="text-gray-600 absolute left-3">{prefixEle}</span>
         )}
         <Component
           {...inputProps}

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head"
 import { Image } from "~/components/ui/Image"
-import { useState, useMemo } from "react"
+import React, { useState, useMemo } from "react"
 import { indexer } from "@crossbell/indexer"
 import { useCombobox } from "downshift"
 import { Input } from "../components/ui/Input"
@@ -80,15 +80,15 @@ export default function Home() {
             >
               <Input
                 className="w-full focus:border-gray-300 focus:ring-0 border-0 rounded-none"
-                prefix={
+                prefixEle={
                   <MagnifyingGlassIcon className="w-5 h-5 text-gray-500" />
                 }
                 {...getInputProps({
-                  onKeyDown: (event) => {
+                  onKeyDown: ((event) => {
                     if (event.key === "Enter" && !items.length) {
                       Router.push(`/${inputValue}`)
                     }
-                  },
+                  }) as React.KeyboardEventHandler<HTMLInputElement>,
                 })}
               />
               <>