chore: perfect type definition (#1003)

web/app/components/app-sidebar/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import type { FC } from 'react'
 import NavLink from './navLink'
 import AppBasic from './basic'
 
+import type { NavIcon } from './navLink'
+
 export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset' | 'notion'
   title: string
@@ -12,13 +13,13 @@ export type IAppDetailNavProps = {
   navigation: Array<{
     name: string
     href: string
-    icon: any
-    selectedIcon: any
+    icon: NavIcon
+    selectedIcon: NavIcon
   }>
   extraInfo?: React.ReactNode
 }
 
-const AppDetailNav: FC<IAppDetailNavProps> = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }) => {
+const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
   return (
     <div className="flex flex-col w-56 overflow-y-auto bg-white border-r border-gray-200 shrink-0">
       <div className="flex flex-shrink-0 p-4">

web/app/components/app-sidebar/navLink.tsx

@@ -1,17 +1,30 @@
 'use client'
+
 import { useSelectedLayoutSegment } from 'next/navigation'
 import classNames from 'classnames'
 import Link from 'next/link'
 
+export type NavIcon = React.ComponentType<
+React.PropsWithoutRef<React.ComponentProps<'svg'>> & {
+  title?: string | undefined
+  titleId?: string | undefined
+}
+>
+
+export type NavLinkProps = {
+  name: string
+  href: string
+  iconMap: {
+    selected: NavIcon
+    normal: NavIcon
+  }
+}
+
 export default function NavLink({
   name,
   href,
   iconMap,
-}: {
-  name: string
-  href: string
-  iconMap: { selected: any; normal: any }
-}) {
+}: NavLinkProps) {
   const segment = useSelectedLayoutSegment()
   const isActive = href.toLowerCase().split('/')?.pop() === segment?.toLowerCase()
   const NavIcon = isActive ? iconMap.selected : iconMap.normal