menu-item.tsx 949 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import React, { type FC } from 'react'
  2. import type { VersionHistoryContextMenuOptions } from '../../../types'
  3. import cn from '@/utils/classnames'
  4. type MenuItemProps = {
  5. item: {
  6. key: VersionHistoryContextMenuOptions
  7. name: string
  8. }
  9. onClick: (operation: VersionHistoryContextMenuOptions) => void
  10. isDestructive?: boolean
  11. }
  12. const MenuItem: FC<MenuItemProps> = ({
  13. item,
  14. onClick,
  15. isDestructive = false,
  16. }) => {
  17. return (
  18. <div
  19. className={cn(
  20. 'flex items-center justify-between px-2 py-1.5 cursor-pointer rounded-lg ',
  21. isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
  22. )}
  23. onClick={() => {
  24. onClick(item.key)
  25. }}
  26. >
  27. <div className={cn(
  28. 'flex-1 text-text-primary system-md-regular',
  29. isDestructive && 'hover:text-text-destructive',
  30. )}>
  31. {item.name}
  32. </div>
  33. </div>
  34. )
  35. }
  36. export default React.memo(MenuItem)