File size: 2,143 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
'use client'
import cn from 'classnames'
import React, { useRef } from 'react'
import { useRouter } from 'next/navigation'
import { useHover } from 'ahooks'
import s from './style.module.css'
import ItemOperation from '@/app/components/explore/item-operation'
import AppIcon from '@/app/components/base/app-icon'
export type IAppNavItemProps = {
isMobile: boolean
name: string
id: string
icon: string
icon_background: string
isSelected: boolean
isPinned: boolean
togglePin: () => void
uninstallable: boolean
onDelete: (id: string) => void
}
export default function AppNavItem({
isMobile,
name,
id,
icon,
icon_background,
isSelected,
isPinned,
togglePin,
uninstallable,
onDelete,
}: IAppNavItemProps) {
const router = useRouter()
const url = `/explore/installed/${id}`
const ref = useRef(null)
const isHovering = useHover(ref)
return (
<div
ref={ref}
key={id}
className={cn(
s.item,
isSelected ? s.active : 'hover:bg-gray-200',
'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
)}
onClick={() => {
router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
}}
>
{isMobile && <AppIcon size='tiny' icon={icon} background={icon_background} />}
{!isMobile && (
<>
<div className='flex items-center space-x-2 w-0 grow'>
<AppIcon size='tiny' icon={icon} background={icon_background} />
<div className='overflow-hidden text-ellipsis whitespace-nowrap' title={name}>{name}</div>
</div>
<div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
<ItemOperation
isPinned={isPinned}
isItemHovering={isHovering}
togglePin={togglePin}
isShowDelete={!uninstallable && !isSelected}
onDelete={() => onDelete(id)}
/>
</div>
</>
)}
</div>
)
}
|