dify/web/app/components/base/encrypted-bottom/index.tsx

38 lines
1.3 KiB
TypeScript

import type { I18nKeysWithPrefix } from '@/types/i18n'
import { RiLock2Fill } from '@remixicon/react'
import Link from 'next/link'
import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
type EncryptedKey = I18nKeysWithPrefix<'common', 'provider.encrypted.'>
type Props = {
className?: string
frontTextKey?: EncryptedKey
backTextKey?: EncryptedKey
}
const DEFAULT_FRONT_KEY: EncryptedKey = 'provider.encrypted.front'
const DEFAULT_BACK_KEY: EncryptedKey = 'provider.encrypted.back'
export const EncryptedBottom = (props: Props) => {
const { t } = useTranslation()
const { frontTextKey = DEFAULT_FRONT_KEY, backTextKey = DEFAULT_BACK_KEY, className } = props
return (
<div className={cn('system-xs-regular flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary', className)}>
<RiLock2Fill className="mx-1 h-3 w-3 text-text-quaternary" />
{t(frontTextKey, { ns: 'common' })}
<Link
className="mx-1 text-text-accent"
target="_blank"
rel="noopener noreferrer"
href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
>
PKCS1_OAEP
</Link>
{t(backTextKey, { ns: 'common' })}
</div>
)
}