konnosDashboard
ProductMenuItem.tsx87 lines · main
1import Link from 'next/link'
2import { Badge, Button, Menu } from 'ui'
3
4import { ProductMenuGroupItem } from './ProductMenu.types'
5import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
6
7interface ProductMenuItemProps {
8 item: ProductMenuGroupItem
9 isActive: boolean
10 target?: '_blank' | '_self'
11 hoverText?: string
12 onClick?: () => void
13}
14
15export const ProductMenuItem = ({
16 item,
17 isActive,
18 target = '_self',
19 hoverText = '',
20 onClick,
21}: ProductMenuItemProps) => {
22 const { name = '', url = '', icon, rightIcon, isExternal, label, disabled, shortcutId } = item
23
24 const menuItem = (
25 <Menu.Item icon={icon} active={isActive} onClick={onClick}>
26 <div className="flex w-full items-center justify-between gap-1">
27 <div
28 className="flex items-center gap-1 min-w-0 flex-1"
29 title={
30 shortcutId ? undefined : hoverText ? hoverText : typeof name === 'string' ? name : ''
31 }
32 >
33 <span className="truncate flex-1 min-w-0">{name}</span>
34 {label !== undefined && (
35 <Badge
36 className="shrink-0"
37 variant={label.toLowerCase() === 'new' ? 'success' : 'warning'}
38 >
39 {label}
40 </Badge>
41 )}
42 </div>
43 {rightIcon && <div>{rightIcon}</div>}
44 </div>
45 </Menu.Item>
46 )
47
48 if (disabled) {
49 return <div className="opacity-50 pointer-events-none">{menuItem}</div>
50 }
51
52 if (url) {
53 if (isExternal) {
54 const externalLink = (
55 <Button asChild block className="justify-start!" type="text" size="small" icon={icon}>
56 <Link href={url} target="_blank" rel="noreferrer">
57 {name}
58 </Link>
59 </Button>
60 )
61
62 return shortcutId ? (
63 <ShortcutTooltip shortcutId={shortcutId} side="right" delayDuration={1000}>
64 {externalLink}
65 </ShortcutTooltip>
66 ) : (
67 externalLink
68 )
69 }
70
71 const link = (
72 <Link href={url} className="block" target={target} onClick={onClick}>
73 {menuItem}
74 </Link>
75 )
76
77 return shortcutId ? (
78 <ShortcutTooltip shortcutId={shortcutId} side="right" delayDuration={1000}>
79 {link}
80 </ShortcutTooltip>
81 ) : (
82 link
83 )
84 }
85
86 return menuItem
87}