Supports display license status (#10408)

Co-authored-by: Garfield Dai <dai.hai@foxmail.com>

web/app/components/header/index.tsx

@@ -12,6 +12,7 @@ import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
 import ToolsNav from './tools-nav'
 import GithubStar from './github-star'
+import LicenseNav from './license-env'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
@@ -79,6 +80,7 @@ const Header = () => {
         </div>
       )}
       <div className='flex items-center flex-shrink-0'>
+        <LicenseNav />
         <EnvNav />
         {enableBilling && (
           <div className='mr-3 select-none'>

web/app/components/header/license-env/index.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import AppContext from '@/context/app-context'
+import { LicenseStatus } from '@/types/feature'
+import { useTranslation } from 'react-i18next'
+import { useContextSelector } from 'use-context-selector'
+import dayjs from 'dayjs'
+
+const LicenseNav = () => {
+  const { t } = useTranslation()
+  const systemFeatures = useContextSelector(AppContext, s => s.systemFeatures)
+
+  if (systemFeatures.license?.status === LicenseStatus.EXPIRING) {
+    const expiredAt = systemFeatures.license?.expired_at
+    const count = dayjs(expiredAt).diff(dayjs(), 'days')
+    return <div className='px-2 py-1 mr-4 rounded-full bg-util-colors-orange-orange-50 border-util-colors-orange-orange-100 system-xs-medium text-util-colors-orange-orange-600'>
+      {count <= 1 && <span>{t('common.license.expiring', { count })}</span>}
+      {count > 1 && <span>{t('common.license.expiring_plural', { count })}</span>}
+    </div>
+  }
+  if (systemFeatures.license.status === LicenseStatus.ACTIVE) {
+    return <div className='px-2 py-1 mr-4 rounded-md bg-util-colors-indigo-indigo-50 border-util-colors-indigo-indigo-100 system-xs-medium text-util-colors-indigo-indigo-600'>
+      Enterprise
+    </div>
+  }
+  return null
+}
+
+export default LicenseNav