dify/web/app/components/billing/trigger-events-limit-modal/index.tsx

52 lines
1.3 KiB
TypeScript

'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
import UsageInfo from '@/app/components/billing/usage-info'
import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
type Props = {
show: boolean
onClose: () => void
onUpgrade: () => void
usage: number
total: number
resetInDays?: number
}
const TriggerEventsLimitModal: FC<Props> = ({
show,
onClose,
onUpgrade,
usage,
total,
resetInDays,
}) => {
const { t } = useTranslation()
return (
<PlanUpgradeModal
show={show}
onClose={onClose}
onUpgrade={onUpgrade}
Icon={TriggerAll as React.ComponentType<React.SVGProps<SVGSVGElement>>}
title={t('billing.triggerLimitModal.title')}
description={t('billing.triggerLimitModal.description')}
extraInfo={(
<UsageInfo
className='mt-4 w-full rounded-[12px] bg-components-panel-on-panel-item-bg'
Icon={TriggerAll}
name={t('billing.triggerLimitModal.usageTitle')}
usage={usage}
total={total}
resetInDays={resetInDays}
hideIcon
/>
)}
/>
)
}
export default React.memo(TriggerEventsLimitModal)