dify/web/app/components/develop/secret-key/secret-key-button.tsx

36 lines
1.1 KiB
TypeScript

'use client'
import { RiKey2Line } from '@remixicon/react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
type ISecretKeyButtonProps = {
className?: string
appId?: string
textCls?: string
}
const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) => {
const [isVisible, setVisible] = useState(false)
const { t } = useTranslation()
return (
<>
<Button
className={`px-3 ${className}`}
onClick={() => setVisible(true)}
size="small"
variant="ghost"
>
<div className="flex h-3.5 w-3.5 items-center justify-center">
<RiKey2Line className="h-3.5 w-3.5 text-text-tertiary" />
</div>
<div className={`system-xs-medium px-[3px] text-text-tertiary ${textCls}`}>{t('apiKey', { ns: 'appApi' })}</div>
</Button>
<SecretKeyModal isShow={isVisible} onClose={() => setVisible(false)} appId={appId} />
</>
)
}
export default SecretKeyButton