dify/web/app/components/header/account-dropdown/menu-item-content.tsx

import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'

const menuLabelClassName = 'min-w-0 grow truncate px-1 text-text-secondary system-md-regular'
const menuLeadingIconClassName = 'size-4 shrink-0 text-text-tertiary'

const menuTrailingIconClassName = 'size-[14px] shrink-0 text-text-tertiary'

type MenuItemContentProps = {
  iconClassName: string
  label: ReactNode
  trailing?: ReactNode
}

export function MenuItemContent({ iconClassName, label, trailing }: MenuItemContentProps) {
  const labelTitle = typeof label === 'string' ? label : undefined

  return (
    <>
      <span aria-hidden className={cn(menuLeadingIconClassName, iconClassName)} />
      <div className={menuLabelClassName} title={labelTitle}>
        {label}
      </div>
      {trailing}
    </>
  )
}

export function ExternalLinkIndicator() {
  return <span aria-hidden className={cn('i-ri-arrow-right-up-line', menuTrailingIconClassName)} />
}