| import type { FC } from 'react' | import type { FC } from 'react' | ||||
| import { useTranslation } from 'react-i18next' | |||||
| import IconWithTooltip from './icon-with-tooltip' | import IconWithTooltip from './icon-with-tooltip' | ||||
| import PartnerDark from '@/app/components/base/icons/src/public/plugins/PartnerDark' | import PartnerDark from '@/app/components/base/icons/src/public/plugins/PartnerDark' | ||||
| import PartnerLight from '@/app/components/base/icons/src/public/plugins/PartnerLight' | import PartnerLight from '@/app/components/base/icons/src/public/plugins/PartnerLight' | ||||
| type PartnerProps = { | type PartnerProps = { | ||||
| className?: string | className?: string | ||||
| text: string | |||||
| } | } | ||||
| const Partner: FC<PartnerProps> = ({ | const Partner: FC<PartnerProps> = ({ | ||||
| className, | className, | ||||
| text, | |||||
| }) => { | }) => { | ||||
| const { t } = useTranslation() | |||||
| const { theme } = useTheme() | const { theme } = useTheme() | ||||
| return ( | return ( | ||||
| theme={theme} | theme={theme} | ||||
| BadgeIconLight={PartnerLight} | BadgeIconLight={PartnerLight} | ||||
| BadgeIconDark={PartnerDark} | BadgeIconDark={PartnerDark} | ||||
| popupContent={t('plugin.marketplace.partnerTip')} | |||||
| popupContent={text} | |||||
| /> | /> | ||||
| ) | ) | ||||
| } | } |
| import type { FC } from 'react' | import type { FC } from 'react' | ||||
| import { useTranslation } from 'react-i18next' | |||||
| import IconWithTooltip from './icon-with-tooltip' | import IconWithTooltip from './icon-with-tooltip' | ||||
| import VerifiedDark from '@/app/components/base/icons/src/public/plugins/VerifiedDark' | import VerifiedDark from '@/app/components/base/icons/src/public/plugins/VerifiedDark' | ||||
| import VerifiedLight from '@/app/components/base/icons/src/public/plugins/VerifiedLight' | import VerifiedLight from '@/app/components/base/icons/src/public/plugins/VerifiedLight' | ||||
| type VerifiedProps = { | type VerifiedProps = { | ||||
| className?: string | className?: string | ||||
| text: string | |||||
| } | } | ||||
| const Verified: FC<VerifiedProps> = ({ | const Verified: FC<VerifiedProps> = ({ | ||||
| className, | className, | ||||
| text, | |||||
| }) => { | }) => { | ||||
| const { t } = useTranslation() | |||||
| const { theme } = useTheme() | const { theme } = useTheme() | ||||
| return ( | return ( | ||||
| theme={theme} | theme={theme} | ||||
| BadgeIconLight={VerifiedLight} | BadgeIconLight={VerifiedLight} | ||||
| BadgeIconDark={VerifiedDark} | BadgeIconDark={VerifiedDark} | ||||
| popupContent={t('plugin.marketplace.verifiedTip')} | |||||
| popupContent={text} | |||||
| /> | /> | ||||
| ) | ) | ||||
| } | } |
| <div className="ml-3 w-0 grow"> | <div className="ml-3 w-0 grow"> | ||||
| <div className="flex items-center h-5"> | <div className="flex items-center h-5"> | ||||
| <Title title={getLocalizedText(label)} /> | <Title title={getLocalizedText(label)} /> | ||||
| {isPartner && <Partner className='w-4 h-4 ml-0.5' />} | |||||
| {verified && <Verified className='w-4 h-4 ml-0.5' />} | |||||
| {isPartner && <Partner className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.partnerTip')} />} | |||||
| {verified && <Verified className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.verifiedTip')} />} | |||||
| {titleLeft} {/* This can be version badge */} | {titleLeft} {/* This can be version badge */} | ||||
| </div> | </div> | ||||
| <OrgInfo | <OrgInfo |