You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
'use client'
|
|
import cn from 'classnames'
|
|
import { useRouter } from 'next/navigation'
|
|
import ItemOperation from '@/app/components/explore/item-operation'
|
|
|
|
import s from './style.module.css'
|
|
|
|
export interface IAppNavItemProps {
|
|
name: string
|
|
id: string
|
|
isSelected: boolean
|
|
isPinned: boolean
|
|
togglePin: () => void
|
|
uninstallable: boolean
|
|
onDelete: (id: string) => void
|
|
}
|
|
|
|
export default function AppNavItem({
|
|
name,
|
|
id,
|
|
isSelected,
|
|
isPinned,
|
|
togglePin,
|
|
uninstallable,
|
|
onDelete
|
|
}: IAppNavItemProps) {
|
|
const router = useRouter()
|
|
const url = `/explore/installed/${id}`
|
|
|
|
return (
|
|
<div
|
|
key={id}
|
|
className={cn(
|
|
s.item,
|
|
isSelected ? s.active : 'hover:bg-gray-200',
|
|
'flex h-8 justify-between px-2 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().
|
|
}}
|
|
>
|
|
<div className='flex items-center'>
|
|
<div
|
|
className={cn(
|
|
'shrink-0 mr-2 h-6 w-6 rounded-md border bg-[#D5F5F6]',
|
|
)}
|
|
style={{
|
|
borderColor: '0.5px solid rgba(0, 0, 0, 0.05)'
|
|
}}
|
|
/>
|
|
<div className='max-w-[110px] overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
|
|
</div>
|
|
{
|
|
!isSelected && (
|
|
<div className={cn(s.opBtn, 'shrink-0')} onClick={e => e.stopPropagation()}>
|
|
<ItemOperation
|
|
isPinned={isPinned}
|
|
togglePin={togglePin}
|
|
isShowDelete={!uninstallable}
|
|
onDelete={() => onDelete(id)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
)
|
|
}
|