dify
This commit is contained in:
31
dify/web/app/components/billing/annotation-full/index.tsx
Normal file
31
dify/web/app/components/billing/annotation-full/index.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import UpgradeBtn from '../upgrade-btn'
|
||||
import Usage from './usage'
|
||||
import s from './style.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
import GridMask from '@/app/components/base/grid-mask'
|
||||
|
||||
const AnnotationFull: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<GridMask wrapperClassName='rounded-lg' canvasClassName='rounded-lg' gradientClassName='rounded-lg'>
|
||||
<div className='mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-3.5 py-4 shadow-md transition-all duration-200 ease-in-out'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
|
||||
<div>{t('billing.annotatedResponse.fullTipLine1')}</div>
|
||||
<div>{t('billing.annotatedResponse.fullTipLine2')}</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<UpgradeBtn loc={'annotation-create'} />
|
||||
</div>
|
||||
</div>
|
||||
<Usage className='mt-4' />
|
||||
</div>
|
||||
</GridMask>
|
||||
)
|
||||
}
|
||||
export default React.memo(AnnotationFull)
|
||||
47
dify/web/app/components/billing/annotation-full/modal.tsx
Normal file
47
dify/web/app/components/billing/annotation-full/modal.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import UpgradeBtn from '../upgrade-btn'
|
||||
import Modal from '../../base/modal'
|
||||
import Usage from './usage'
|
||||
import s from './style.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
import GridMask from '@/app/components/base/grid-mask'
|
||||
|
||||
type Props = {
|
||||
show: boolean
|
||||
onHide: () => void
|
||||
}
|
||||
const AnnotationFullModal: FC<Props> = ({
|
||||
show,
|
||||
onHide,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isShow={show}
|
||||
onClose={onHide}
|
||||
closable
|
||||
className='!p-0'
|
||||
>
|
||||
<GridMask wrapperClassName='rounded-lg' canvasClassName='rounded-lg' gradientClassName='rounded-lg'>
|
||||
<div className='mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-7 py-6 shadow-md transition-all duration-200 ease-in-out'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className={cn(s.textGradient, 'text-[18px] font-semibold leading-[27px]')}>
|
||||
<div>{t('billing.annotatedResponse.fullTipLine1')}</div>
|
||||
<div>{t('billing.annotatedResponse.fullTipLine2')}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Usage className='mt-4' />
|
||||
<div className='mt-7 flex justify-end'>
|
||||
<UpgradeBtn loc={'annotation-create'} />
|
||||
</div>
|
||||
</div>
|
||||
</GridMask>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default React.memo(AnnotationFullModal)
|
||||
@@ -0,0 +1,7 @@
|
||||
.textGradient {
|
||||
background: linear-gradient(92deg, #2250F2 -29.55%, #0EBCF3 75.22%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
32
dify/web/app/components/billing/annotation-full/usage.tsx
Normal file
32
dify/web/app/components/billing/annotation-full/usage.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { MessageFastPlus } from '../../base/icons/src/vender/line/communication'
|
||||
import UsageInfo from '../usage-info'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Usage: FC<Props> = ({
|
||||
className,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { plan } = useProviderContext()
|
||||
const {
|
||||
usage,
|
||||
total,
|
||||
} = plan
|
||||
return (
|
||||
<UsageInfo
|
||||
className={className}
|
||||
Icon={MessageFastPlus}
|
||||
name={t('billing.annotatedResponse.quotaTitle')}
|
||||
usage={usage.annotatedResponse}
|
||||
total={total.annotatedResponse}
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default React.memo(Usage)
|
||||
@@ -0,0 +1,84 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import UpgradeBtn from '../upgrade-btn'
|
||||
import ProgressBar from '@/app/components/billing/progress-bar'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { mailToSupport } from '@/app/components/header/utils/util'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { Plan } from '@/app/components/billing/type'
|
||||
import s from './style.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const LOW = 50
|
||||
const MIDDLE = 80
|
||||
|
||||
const AppsFull: FC<{ loc: string; className?: string; }> = ({
|
||||
loc,
|
||||
className,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { plan } = useProviderContext()
|
||||
const { userProfile, langGeniusVersionInfo } = useAppContext()
|
||||
const isTeam = plan.type === Plan.team
|
||||
const usage = plan.usage.buildApps
|
||||
const total = plan.total.buildApps
|
||||
const percent = usage / total * 100
|
||||
const color = (() => {
|
||||
if (percent < LOW)
|
||||
return 'bg-components-progress-bar-progress-solid'
|
||||
|
||||
if (percent < MIDDLE)
|
||||
return 'bg-components-progress-warning-progress'
|
||||
|
||||
return 'bg-components-progress-error-progress'
|
||||
})()
|
||||
return (
|
||||
<div className={cn(
|
||||
'flex flex-col gap-3 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-4 shadow-xs backdrop-blur-sm',
|
||||
className,
|
||||
)}>
|
||||
<div className='flex justify-between'>
|
||||
{!isTeam && (
|
||||
<div>
|
||||
<div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
|
||||
{t('billing.apps.fullTip1')}
|
||||
</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('billing.apps.fullTip1des')}</div>
|
||||
</div>
|
||||
)}
|
||||
{isTeam && (
|
||||
<div>
|
||||
<div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
|
||||
{t('billing.apps.fullTip2')}
|
||||
</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('billing.apps.fullTip2des')}</div>
|
||||
</div>
|
||||
)}
|
||||
{(plan.type === Plan.sandbox || plan.type === Plan.professional) && (
|
||||
<UpgradeBtn isShort loc={loc} />
|
||||
)}
|
||||
{plan.type !== Plan.sandbox && plan.type !== Plan.professional && (
|
||||
<Button variant='secondary-accent'>
|
||||
<a target='_blank' rel='noopener noreferrer' href={mailToSupport(userProfile.email, plan.type, langGeniusVersionInfo.current_version)}>
|
||||
{t('billing.apps.contactUs')}
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='system-xs-medium flex items-center justify-between text-text-secondary'>
|
||||
<div>{t('billing.usagePage.buildApps')}</div>
|
||||
<div>{usage}/{total}</div>
|
||||
</div>
|
||||
<ProgressBar
|
||||
percent={percent}
|
||||
color={color}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(AppsFull)
|
||||
@@ -0,0 +1,7 @@
|
||||
.textGradient {
|
||||
background: linear-gradient(92deg, #0EBCF3 -29.55%, #2250F2 75.22%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
40
dify/web/app/components/billing/billing-page/index.tsx
Normal file
40
dify/web/app/components/billing/billing-page/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
RiArrowRightUpLine,
|
||||
} from '@remixicon/react'
|
||||
import PlanComp from '../plan'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import { fetchBillingUrl } from '@/service/billing'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
|
||||
const Billing: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
const { enableBilling } = useProviderContext()
|
||||
const { data: billingUrl } = useSWR(
|
||||
(!enableBilling || !isCurrentWorkspaceManager) ? null : ['/billing/invoices'],
|
||||
() => fetchBillingUrl().then(data => data.url),
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PlanComp loc={'billing-page'} />
|
||||
{enableBilling && isCurrentWorkspaceManager && billingUrl && (
|
||||
<>
|
||||
<Divider className='my-4' />
|
||||
<a className='system-xs-medium flex cursor-pointer items-center text-text-accent-light-mode-only' href={billingUrl} target='_blank' rel='noopener noreferrer'>
|
||||
<span className='pr-0.5'>{t('billing.viewBilling')}</span>
|
||||
<RiArrowRightUpLine className='h-4 w-4' />
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Billing)
|
||||
97
dify/web/app/components/billing/config.ts
Normal file
97
dify/web/app/components/billing/config.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import type { BasicPlan } from '@/app/components/billing/type'
|
||||
import { Plan, type PlanInfo, Priority } from '@/app/components/billing/type'
|
||||
|
||||
const supportModelProviders = 'OpenAI/Anthropic/Llama2/Azure OpenAI/Hugging Face/Replicate'
|
||||
|
||||
export const NUM_INFINITE = -1
|
||||
export const contractSales = 'contractSales'
|
||||
export const unAvailable = 'unAvailable'
|
||||
|
||||
export const contactSalesUrl = 'https://vikgc6bnu1s.typeform.com/dify-business'
|
||||
export const getStartedWithCommunityUrl = 'https://github.com/langgenius/dify'
|
||||
export const getWithPremiumUrl = 'https://aws.amazon.com/marketplace/pp/prodview-t22mebxzwjhu6'
|
||||
|
||||
export const ALL_PLANS: Record<BasicPlan, PlanInfo> = {
|
||||
sandbox: {
|
||||
level: 1,
|
||||
price: 0,
|
||||
modelProviders: supportModelProviders,
|
||||
teamWorkspace: 1,
|
||||
teamMembers: 1,
|
||||
buildApps: 5,
|
||||
documents: 50,
|
||||
vectorSpace: '50MB',
|
||||
documentsUploadQuota: 0,
|
||||
documentsRequestQuota: 10,
|
||||
apiRateLimit: 5000,
|
||||
documentProcessingPriority: Priority.standard,
|
||||
messageRequest: 200,
|
||||
triggerEvents: 3000,
|
||||
annotatedResponse: 10,
|
||||
logHistory: 30,
|
||||
},
|
||||
professional: {
|
||||
level: 2,
|
||||
price: 59,
|
||||
modelProviders: supportModelProviders,
|
||||
teamWorkspace: 1,
|
||||
teamMembers: 3,
|
||||
buildApps: 50,
|
||||
documents: 500,
|
||||
vectorSpace: '5GB',
|
||||
documentsUploadQuota: 0,
|
||||
documentsRequestQuota: 100,
|
||||
apiRateLimit: NUM_INFINITE,
|
||||
documentProcessingPriority: Priority.priority,
|
||||
messageRequest: 5000,
|
||||
triggerEvents: 20000,
|
||||
annotatedResponse: 2000,
|
||||
logHistory: NUM_INFINITE,
|
||||
},
|
||||
team: {
|
||||
level: 3,
|
||||
price: 159,
|
||||
modelProviders: supportModelProviders,
|
||||
teamWorkspace: 1,
|
||||
teamMembers: 50,
|
||||
buildApps: 200,
|
||||
documents: 1000,
|
||||
vectorSpace: '20GB',
|
||||
documentsUploadQuota: 0,
|
||||
documentsRequestQuota: 1000,
|
||||
apiRateLimit: NUM_INFINITE,
|
||||
documentProcessingPriority: Priority.topPriority,
|
||||
messageRequest: 10000,
|
||||
triggerEvents: NUM_INFINITE,
|
||||
annotatedResponse: 5000,
|
||||
logHistory: NUM_INFINITE,
|
||||
},
|
||||
}
|
||||
|
||||
export const defaultPlan = {
|
||||
type: Plan.sandbox as BasicPlan,
|
||||
usage: {
|
||||
documents: 50,
|
||||
vectorSpace: 1,
|
||||
buildApps: 1,
|
||||
teamMembers: 1,
|
||||
annotatedResponse: 1,
|
||||
documentsUploadQuota: 0,
|
||||
apiRateLimit: 0,
|
||||
triggerEvents: 0,
|
||||
},
|
||||
total: {
|
||||
documents: 50,
|
||||
vectorSpace: 10,
|
||||
buildApps: 10,
|
||||
teamMembers: 1,
|
||||
annotatedResponse: 10,
|
||||
documentsUploadQuota: 0,
|
||||
apiRateLimit: ALL_PLANS.sandbox.apiRateLimit,
|
||||
triggerEvents: ALL_PLANS.sandbox.triggerEvents,
|
||||
},
|
||||
reset: {
|
||||
apiRateLimit: null,
|
||||
triggerEvents: null,
|
||||
},
|
||||
}
|
||||
60
dify/web/app/components/billing/header-billing-btn/index.tsx
Normal file
60
dify/web/app/components/billing/header-billing-btn/index.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import UpgradeBtn from '../upgrade-btn'
|
||||
import { Plan } from '../type'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
|
||||
type Props = {
|
||||
onClick?: () => void
|
||||
isDisplayOnly?: boolean
|
||||
}
|
||||
|
||||
const HeaderBillingBtn: FC<Props> = ({
|
||||
onClick,
|
||||
isDisplayOnly = false,
|
||||
}) => {
|
||||
const { plan, enableBilling, isFetchedPlan } = useProviderContext()
|
||||
const {
|
||||
type,
|
||||
} = plan
|
||||
|
||||
const name = (() => {
|
||||
if (type === Plan.professional)
|
||||
return 'pro'
|
||||
return type
|
||||
})()
|
||||
const classNames = (() => {
|
||||
if (type === Plan.professional)
|
||||
return `border-[#E0F2FE] ${!isDisplayOnly ? 'hover:border-[#B9E6FE]' : ''} bg-[#E0F2FE] text-[#026AA2]`
|
||||
if (type === Plan.team)
|
||||
return `border-[#E0EAFF] ${!isDisplayOnly ? 'hover:border-[#C7D7FE]' : ''} bg-[#E0EAFF] text-[#3538CD]`
|
||||
return ''
|
||||
})()
|
||||
|
||||
if (!enableBilling || !isFetchedPlan)
|
||||
return null
|
||||
|
||||
if (type === Plan.sandbox)
|
||||
return <UpgradeBtn onClick={isDisplayOnly ? undefined : onClick} isShort />
|
||||
|
||||
const handleClick = () => {
|
||||
if (!isDisplayOnly && onClick)
|
||||
onClick()
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className={cn(
|
||||
classNames,
|
||||
'flex h-[22px] items-center rounded-md border px-2 text-xs font-semibold uppercase',
|
||||
isDisplayOnly ? 'cursor-default' : 'cursor-pointer',
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(HeaderBillingBtn)
|
||||
20
dify/web/app/components/billing/partner-stack/index.tsx
Normal file
20
dify/web/app/components/billing/partner-stack/index.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
'use client'
|
||||
import { IS_CLOUD_EDITION } from '@/config'
|
||||
import type { FC } from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import usePSInfo from './use-ps-info'
|
||||
|
||||
const PartnerStack: FC = () => {
|
||||
const { saveOrUpdate, bind } = usePSInfo()
|
||||
useEffect(() => {
|
||||
if (!IS_CLOUD_EDITION)
|
||||
return
|
||||
// Save PartnerStack info in cookie first. Because if user hasn't logged in, redirecting to login page would cause lose the partnerStack info in URL.
|
||||
saveOrUpdate()
|
||||
// bind PartnerStack info after user logged in
|
||||
bind()
|
||||
}, [])
|
||||
|
||||
return null
|
||||
}
|
||||
export default React.memo(PartnerStack)
|
||||
70
dify/web/app/components/billing/partner-stack/use-ps-info.ts
Normal file
70
dify/web/app/components/billing/partner-stack/use-ps-info.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { PARTNER_STACK_CONFIG } from '@/config'
|
||||
import { useBindPartnerStackInfo } from '@/service/use-billing'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import Cookies from 'js-cookie'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { useCallback } from 'react'
|
||||
|
||||
const usePSInfo = () => {
|
||||
const searchParams = useSearchParams()
|
||||
const psInfoInCookie = (() => {
|
||||
try {
|
||||
return JSON.parse(Cookies.get(PARTNER_STACK_CONFIG.cookieName) || '{}')
|
||||
}
|
||||
catch (e) {
|
||||
console.error('Failed to parse partner stack info from cookie:', e)
|
||||
return {}
|
||||
}
|
||||
})()
|
||||
const psPartnerKey = searchParams.get('ps_partner_key') || psInfoInCookie?.partnerKey
|
||||
const psClickId = searchParams.get('ps_xid') || psInfoInCookie?.clickId
|
||||
const isPSChanged = psInfoInCookie?.partnerKey !== psPartnerKey || psInfoInCookie?.clickId !== psClickId
|
||||
const [hasBind, {
|
||||
setTrue: setBind,
|
||||
}] = useBoolean(false)
|
||||
const { mutateAsync } = useBindPartnerStackInfo()
|
||||
// Save to top domain. cloud.dify.ai => .dify.ai
|
||||
const domain = globalThis.location.hostname.replace('cloud', '')
|
||||
|
||||
const saveOrUpdate = useCallback(() => {
|
||||
if(!psPartnerKey || !psClickId)
|
||||
return
|
||||
if(!isPSChanged)
|
||||
return
|
||||
Cookies.set(PARTNER_STACK_CONFIG.cookieName, JSON.stringify({
|
||||
partnerKey: psPartnerKey,
|
||||
clickId: psClickId,
|
||||
}), {
|
||||
expires: PARTNER_STACK_CONFIG.saveCookieDays,
|
||||
path: '/',
|
||||
domain,
|
||||
})
|
||||
}, [psPartnerKey, psClickId, isPSChanged])
|
||||
|
||||
const bind = useCallback(async () => {
|
||||
if (psPartnerKey && psClickId && !hasBind) {
|
||||
let shouldRemoveCookie = false
|
||||
try {
|
||||
await mutateAsync({
|
||||
partnerKey: psPartnerKey,
|
||||
clickId: psClickId,
|
||||
})
|
||||
shouldRemoveCookie = true
|
||||
}
|
||||
catch (error: unknown) {
|
||||
if((error as { status: number })?.status === 400)
|
||||
shouldRemoveCookie = true
|
||||
}
|
||||
if (shouldRemoveCookie)
|
||||
Cookies.remove(PARTNER_STACK_CONFIG.cookieName, { path: '/', domain })
|
||||
setBind()
|
||||
}
|
||||
}, [psPartnerKey, psClickId, mutateAsync, hasBind, setBind])
|
||||
return {
|
||||
psPartnerKey,
|
||||
psClickId,
|
||||
saveOrUpdate,
|
||||
bind,
|
||||
}
|
||||
}
|
||||
export default usePSInfo
|
||||
89
dify/web/app/components/billing/plan/assets/enterprise.tsx
Normal file
89
dify/web/app/components/billing/plan/assets/enterprise.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
const Enterprise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
|
||||
<path d='M1 2C1 1.44772 1.44772 1 2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M4.5 2C4.5 1.44772 4.94772 1 5.5 1C6.05228 1 6.5 1.44772 6.5 2C6.5 2.55228 6.05228 3 5.5 3C4.94772 3 4.5 2.55228 4.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M8 2C8 1.44772 8.44772 1 9 1C9.55228 1 10 1.44772 10 2C10 2.55228 9.55228 3 9 3C8.44772 3 8 2.55228 8 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M18.5 2C18.5 1.44772 18.9477 1 19.5 1C20.0523 1 20.5 1.44772 20.5 2C20.5 2.55228 20.0523 3 19.5 3C18.9477 3 18.5 2.55228 18.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 5.5C1 4.94772 1.44772 4.5 2 4.5C2.55228 4.5 3 4.94772 3 5.5C3 6.05228 2.55228 6.5 2 6.5C1.44772 6.5 1 6.05228 1 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 5.5C8 4.94772 8.44772 4.5 9 4.5C9.55228 4.5 10 4.94772 10 5.5C10 6.05228 9.55228 6.5 9 6.5C8.44772 6.5 8 6.05228 8 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 5.5C11.5 4.94772 11.9477 4.5 12.5 4.5C13.0523 4.5 13.5 4.94772 13.5 5.5C13.5 6.05228 13.0523 6.5 12.5 6.5C11.9477 6.5 11.5 6.05228 11.5 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 5.5C15 4.94772 15.4477 4.5 16 4.5C16.5523 4.5 17 4.94772 17 5.5C17 6.05228 16.5523 6.5 16 6.5C15.4477 6.5 15 6.05228 15 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M18.5 5.5C18.5 4.94772 18.9477 4.5 19.5 4.5C20.0523 4.5 20.5 4.94772 20.5 5.5C20.5 6.05228 20.0523 6.5 19.5 6.5C18.9477 6.5 18.5 6.05228 18.5 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M22 5.5C22 4.94772 22.4477 4.5 23 4.5C23.5523 4.5 24 4.94772 24 5.5C24 6.05228 23.5523 6.5 23 6.5C22.4477 6.5 22 6.05228 22 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 5.5C25.5 4.94772 25.9477 4.5 26.5 4.5C27.0523 4.5 27.5 4.94772 27.5 5.5C27.5 6.05228 27.0523 6.5 26.5 6.5C25.9477 6.5 25.5 6.05228 25.5 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M15 9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10C15.4477 10 15 9.55228 15 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M25.5 9C25.5 8.44772 25.9477 8 26.5 8C27.0523 8 27.5 8.44772 27.5 9C27.5 9.55228 27.0523 10 26.5 10C25.9477 10 25.5 9.55228 25.5 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 12.5C4.5 11.9477 4.94772 11.5 5.5 11.5C6.05228 11.5 6.5 11.9477 6.5 12.5C6.5 13.0523 6.05228 13.5 5.5 13.5C4.94772 13.5 4.5 13.0523 4.5 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 12.5C8 11.9477 8.44772 11.5 9 11.5C9.55228 11.5 10 11.9477 10 12.5C10 13.0523 9.55228 13.5 9 13.5C8.44772 13.5 8 13.0523 8 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 12.5C11.5 11.9477 11.9477 11.5 12.5 11.5C13.0523 11.5 13.5 11.9477 13.5 12.5C13.5 13.0523 13.0523 13.5 12.5 13.5C11.9477 13.5 11.5 13.0523 11.5 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 12.5C15 11.9477 15.4477 11.5 16 11.5C16.5523 11.5 17 11.9477 17 12.5C17 13.0523 16.5523 13.5 16 13.5C15.4477 13.5 15 13.0523 15 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M18.5 12.5C18.5 11.9477 18.9477 11.5 19.5 11.5C20.0523 11.5 20.5 11.9477 20.5 12.5C20.5 13.0523 20.0523 13.5 19.5 13.5C18.9477 13.5 18.5 13.0523 18.5 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 12.5C25.5 11.9477 25.9477 11.5 26.5 11.5C27.0523 11.5 27.5 11.9477 27.5 12.5C27.5 13.0523 27.0523 13.5 26.5 13.5C25.9477 13.5 25.5 13.0523 25.5 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 12.5C29 11.9477 29.4477 11.5 30 11.5C30.5523 11.5 31 11.9477 31 12.5C31 13.0523 30.5523 13.5 30 13.5C29.4477 13.5 29 13.0523 29 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 16C4.5 15.4477 4.94772 15 5.5 15C6.05228 15 6.5 15.4477 6.5 16C6.5 16.5523 6.05228 17 5.5 17C4.94772 17 4.5 16.5523 4.5 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M8 16C8 15.4477 8.44772 15 9 15C9.55228 15 10 15.4477 10 16C10 16.5523 9.55228 17 9 17C8.44772 17 8 16.5523 8 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M11.5 16C11.5 15.4477 11.9477 15 12.5 15C13.0523 15 13.5 15.4477 13.5 16C13.5 16.5523 13.0523 17 12.5 17C11.9477 17 11.5 16.5523 11.5 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M18.5 16C18.5 15.4477 18.9477 15 19.5 15C20.0523 15 20.5 15.4477 20.5 16C20.5 16.5523 20.0523 17 19.5 17C18.9477 17 18.5 16.5523 18.5 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M25.5 16C25.5 15.4477 25.9477 15 26.5 15C27.0523 15 27.5 15.4477 27.5 16C27.5 16.5523 27.0523 17 26.5 17C25.9477 17 25.5 16.5523 25.5 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 16C29 15.4477 29.4477 15 30 15C30.5523 15 31 15.4477 31 16C31 16.5523 30.5523 17 30 17C29.4477 17 29 16.5523 29 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 19.5C4.5 18.9477 4.94772 18.5 5.5 18.5C6.05228 18.5 6.5 18.9477 6.5 19.5C6.5 20.0523 6.05228 20.5 5.5 20.5C4.94772 20.5 4.5 20.0523 4.5 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 19.5C8 18.9477 8.44772 18.5 9 18.5C9.55228 18.5 10 18.9477 10 19.5C10 20.0523 9.55228 20.5 9 20.5C8.44772 20.5 8 20.0523 8 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 19.5C11.5 18.9477 11.9477 18.5 12.5 18.5C13.0523 18.5 13.5 18.9477 13.5 19.5C13.5 20.0523 13.0523 20.5 12.5 20.5C11.9477 20.5 11.5 20.0523 11.5 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 19.5C15 18.9477 15.4477 18.5 16 18.5C16.5523 18.5 17 18.9477 17 19.5C17 20.0523 16.5523 20.5 16 20.5C15.4477 20.5 15 20.0523 15 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M18.5 19.5C18.5 18.9477 18.9477 18.5 19.5 18.5C20.0523 18.5 20.5 18.9477 20.5 19.5C20.5 20.0523 20.0523 20.5 19.5 20.5C18.9477 20.5 18.5 20.0523 18.5 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 19.5C25.5 18.9477 25.9477 18.5 26.5 18.5C27.0523 18.5 27.5 18.9477 27.5 19.5C27.5 20.0523 27.0523 20.5 26.5 20.5C25.9477 20.5 25.5 20.0523 25.5 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 19.5C29 18.9477 29.4477 18.5 30 18.5C30.5523 18.5 31 18.9477 31 19.5C31 20.0523 30.5523 20.5 30 20.5C29.4477 20.5 29 20.0523 29 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 23C4.5 22.4477 4.94772 22 5.5 22C6.05228 22 6.5 22.4477 6.5 23C6.5 23.5523 6.05228 24 5.5 24C4.94772 24 4.5 23.5523 4.5 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 23C8 22.4477 8.44772 22 9 22C9.55228 22 10 22.4477 10 23C10 23.5523 9.55228 24 9 24C8.44772 24 8 23.5523 8 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M11.5 23C11.5 22.4477 11.9477 22 12.5 22C13.0523 22 13.5 22.4477 13.5 23C13.5 23.5523 13.0523 24 12.5 24C11.9477 24 11.5 23.5523 11.5 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M15 23C15 22.4477 15.4477 22 16 22C16.5523 22 17 22.4477 17 23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M18.5 23C18.5 22.4477 18.9477 22 19.5 22C20.0523 22 20.5 22.4477 20.5 23C20.5 23.5523 20.0523 24 19.5 24C18.9477 24 18.5 23.5523 18.5 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 23C25.5 22.4477 25.9477 22 26.5 22C27.0523 22 27.5 22.4477 27.5 23C27.5 23.5523 27.0523 24 26.5 24C25.9477 24 25.5 23.5523 25.5 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 26.5C4.5 25.9477 4.94772 25.5 5.5 25.5C6.05228 25.5 6.5 25.9477 6.5 26.5C6.5 27.0523 6.05228 27.5 5.5 27.5C4.94772 27.5 4.5 27.0523 4.5 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 26.5C8 25.9477 8.44772 25.5 9 25.5C9.55228 25.5 10 25.9477 10 26.5C10 27.0523 9.55228 27.5 9 27.5C8.44772 27.5 8 27.0523 8 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M11.5 26.5C11.5 25.9477 11.9477 25.5 12.5 25.5C13.0523 25.5 13.5 25.9477 13.5 26.5C13.5 27.0523 13.0523 27.5 12.5 27.5C11.9477 27.5 11.5 27.0523 11.5 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M15 26.5C15 25.9477 15.4477 25.5 16 25.5C16.5523 25.5 17 25.9477 17 26.5C17 27.0523 16.5523 27.5 16 27.5C15.4477 27.5 15 27.0523 15 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M18.5 26.5C18.5 25.9477 18.9477 25.5 19.5 25.5C20.0523 25.5 20.5 25.9477 20.5 26.5C20.5 27.0523 20.0523 27.5 19.5 27.5C18.9477 27.5 18.5 27.0523 18.5 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 26.5C22 25.9477 22.4477 25.5 23 25.5C23.5523 25.5 24 25.9477 24 26.5C24 27.0523 23.5523 27.5 23 27.5C22.4477 27.5 22 27.0523 22 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 26.5C25.5 25.9477 25.9477 25.5 26.5 25.5C27.0523 25.5 27.5 25.9477 27.5 26.5C27.5 27.0523 27.0523 27.5 26.5 27.5C25.9477 27.5 25.5 27.0523 25.5 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 26.5C29 25.9477 29.4477 25.5 30 25.5C30.5523 25.5 31 25.9477 31 26.5C31 27.0523 30.5523 27.5 30 27.5C29.4477 27.5 29 27.0523 29 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 30C1 29.4477 1.44772 29 2 29C2.55228 29 3 29.4477 3 30C3 30.5523 2.55228 31 2 31C1.44772 31 1 30.5523 1 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M4.5 30C4.5 29.4477 4.94772 29 5.5 29C6.05228 29 6.5 29.4477 6.5 30C6.5 30.5523 6.05228 31 5.5 31C4.94772 31 4.5 30.5523 4.5 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 30C8 29.4477 8.44772 29 9 29C9.55228 29 10 29.4477 10 30C10 30.5523 9.55228 31 9 31C8.44772 31 8 30.5523 8 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M18.5 30C18.5 29.4477 18.9477 29 19.5 29C20.0523 29 20.5 29.4477 20.5 30C20.5 30.5523 20.0523 31 19.5 31C18.9477 31 18.5 30.5523 18.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 30C25.5 29.4477 25.9477 29 26.5 29C27.0523 29 27.5 29.4477 27.5 30C27.5 30.5523 27.0523 31 26.5 31C25.9477 31 25.5 30.5523 25.5 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 30C29 29.4477 29.4477 29 30 29C30.5523 29 31 29.4477 31 30C31 30.5523 30.5523 31 30 31C29.4477 31 29 30.5523 29 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Enterprise
|
||||
4
dify/web/app/components/billing/plan/assets/index.tsx
Normal file
4
dify/web/app/components/billing/plan/assets/index.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
export { default as Sandbox } from './sandbox'
|
||||
export { default as Professional } from './professional'
|
||||
export { default as Team } from './team'
|
||||
export { default as Enterprise } from './enterprise'
|
||||
89
dify/web/app/components/billing/plan/assets/professional.tsx
Normal file
89
dify/web/app/components/billing/plan/assets/professional.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
const Professional = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
|
||||
<rect opacity='0.18' x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='11.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='15' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='18.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='22' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='25.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='29' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='1' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='4.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='8' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='25.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='29' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='1' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='22' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='29' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='1' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='8' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='22' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='25.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='4.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='22' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='25.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='29' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='1' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='4.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='22' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='25.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='29' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='1' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='4.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='8' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='22' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='29' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='1' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='4.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='8' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='22' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='25.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='29' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='1' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='4.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='11.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='15' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='18.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='22' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='25.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='29' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='1' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='1' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='4.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect x='29' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='4.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Professional
|
||||
91
dify/web/app/components/billing/plan/assets/sandbox.tsx
Normal file
91
dify/web/app/components/billing/plan/assets/sandbox.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import React from 'react'
|
||||
|
||||
const Sandbox = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
|
||||
<rect opacity='0.18' x='1' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M8 2C8 1.44772 8.44772 1 9 1C9.55228 1 10 1.44772 10 2C10 2.55228 9.55228 3 9 3C8.44772 3 8 2.55228 8 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M18.5 2C18.5 1.44772 18.9477 1 19.5 1C20.0523 1 20.5 1.44772 20.5 2C20.5 2.55228 20.0523 3 19.5 3C18.9477 3 18.5 2.55228 18.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='1' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='8' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M25.5 5.5C25.5 4.94772 25.9477 4.5 26.5 4.5C27.0523 4.5 27.5 4.94772 27.5 5.5C27.5 6.05228 27.0523 6.5 26.5 6.5C25.9477 6.5 25.5 6.05228 25.5 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M15 9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10C15.4477 10 15 9.55228 15 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='4.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='25.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 12.5C29 11.9477 29.4477 11.5 30 11.5C30.5523 11.5 31 11.9477 31 12.5C31 13.0523 30.5523 13.5 30 13.5C29.4477 13.5 29 13.0523 29 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='4.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='25.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 16C29 15.4477 29.4477 15 30 15C30.5523 15 31 15.4477 31 16C31 16.5523 30.5523 17 30 17C29.4477 17 29 16.5523 29 16Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='4.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='25.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 19.5C29 18.9477 29.4477 18.5 30 18.5C30.5523 18.5 31 18.9477 31 19.5C31 20.0523 30.5523 20.5 30 20.5C29.4477 20.5 29 20.0523 29 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='4.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='4.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='8' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='18.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M22 26.5C22 25.9477 22.4477 25.5 23 25.5C23.5523 25.5 24 25.9477 24 26.5C24 27.0523 23.5523 27.5 23 27.5C22.4477 27.5 22 27.0523 22 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M25.5 26.5C25.5 25.9477 25.9477 25.5 26.5 25.5C27.0523 25.5 27.5 25.9477 27.5 26.5C27.5 27.0523 27.0523 27.5 26.5 27.5C25.9477 27.5 25.5 27.0523 25.5 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='29' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<path d='M1 30C1 29.4477 1.44772 29 2 29C2.55228 29 3 29.4477 3 30C3 30.5523 2.55228 31 2 31C1.44772 31 1 30.5523 1 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M4.5 30C4.5 29.4477 4.94772 29 5.5 29C6.05228 29 6.5 29.4477 6.5 30C6.5 30.5523 6.05228 31 5.5 31C4.94772 31 4.5 30.5523 4.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M8 30C8 29.4477 8.44772 29 9 29C9.55228 29 10 29.4477 10 30C10 30.5523 9.55228 31 9 31C8.44772 31 8 30.5523 8 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M18.5 30C18.5 29.4477 18.9477 29 19.5 29C20.0523 29 20.5 29.4477 20.5 30C20.5 30.5523 20.0523 31 19.5 31C18.9477 31 18.5 30.5523 18.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect opacity='0.18' x='25.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='29' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Sandbox)
|
||||
89
dify/web/app/components/billing/plan/assets/team.tsx
Normal file
89
dify/web/app/components/billing/plan/assets/team.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
const Team = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
|
||||
<rect x='1' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='8' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='18.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M1 5.5C1 4.94772 1.44772 4.5 2 4.5C2.55228 4.5 3 4.94772 3 5.5C3 6.05228 2.55228 6.5 2 6.5C1.44772 6.5 1 6.05228 1 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 5.5C8 4.94772 8.44772 4.5 9 4.5C9.55228 4.5 10 4.94772 10 5.5C10 6.05228 9.55228 6.5 9 6.5C8.44772 6.5 8 6.05228 8 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M18.5 5.5C18.5 4.94772 18.9477 4.5 19.5 4.5C20.0523 4.5 20.5 4.94772 20.5 5.5C20.5 6.05228 20.0523 6.5 19.5 6.5C18.9477 6.5 18.5 6.05228 18.5 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='25.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='15' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M4.5 12.5C4.5 11.9477 4.94772 11.5 5.5 11.5C6.05228 11.5 6.5 11.9477 6.5 12.5C6.5 13.0523 6.05228 13.5 5.5 13.5C4.94772 13.5 4.5 13.0523 4.5 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 12.5C8 11.9477 8.44772 11.5 9 11.5C9.55228 11.5 10 11.9477 10 12.5C10 13.0523 9.55228 13.5 9 13.5C8.44772 13.5 8 13.0523 8 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 12.5C11.5 11.9477 11.9477 11.5 12.5 11.5C13.0523 11.5 13.5 11.9477 13.5 12.5C13.5 13.0523 13.0523 13.5 12.5 13.5C11.9477 13.5 11.5 13.0523 11.5 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 12.5C15 11.9477 15.4477 11.5 16 11.5C16.5523 11.5 17 11.9477 17 12.5C17 13.0523 16.5523 13.5 16 13.5C15.4477 13.5 15 13.0523 15 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 12.5C25.5 11.9477 25.9477 11.5 26.5 11.5C27.0523 11.5 27.5 11.9477 27.5 12.5C27.5 13.0523 27.0523 13.5 26.5 13.5C25.9477 13.5 25.5 13.0523 25.5 12.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='29' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M4.5 16C4.5 15.4477 4.94772 15 5.5 15C6.05228 15 6.5 15.4477 6.5 16C6.5 16.5523 6.05228 17 5.5 17C4.94772 17 4.5 16.5523 4.5 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 16C8 15.4477 8.44772 15 9 15C9.55228 15 10 15.4477 10 16C10 16.5523 9.55228 17 9 17C8.44772 17 8 16.5523 8 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 16C11.5 15.4477 11.9477 15 12.5 15C13.0523 15 13.5 15.4477 13.5 16C13.5 16.5523 13.0523 17 12.5 17C11.9477 17 11.5 16.5523 11.5 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 16C25.5 15.4477 25.9477 15 26.5 15C27.0523 15 27.5 15.4477 27.5 16C27.5 16.5523 27.0523 17 26.5 17C25.9477 17 25.5 16.5523 25.5 16Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='29' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M4.5 19.5C4.5 18.9477 4.94772 18.5 5.5 18.5C6.05228 18.5 6.5 18.9477 6.5 19.5C6.5 20.0523 6.05228 20.5 5.5 20.5C4.94772 20.5 4.5 20.0523 4.5 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 19.5C8 18.9477 8.44772 18.5 9 18.5C9.55228 18.5 10 18.9477 10 19.5C10 20.0523 9.55228 20.5 9 20.5C8.44772 20.5 8 20.0523 8 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 19.5C11.5 18.9477 11.9477 18.5 12.5 18.5C13.0523 18.5 13.5 18.9477 13.5 19.5C13.5 20.0523 13.0523 20.5 12.5 20.5C11.9477 20.5 11.5 20.0523 11.5 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 19.5C15 18.9477 15.4477 18.5 16 18.5C16.5523 18.5 17 18.9477 17 19.5C17 20.0523 16.5523 20.5 16 20.5C15.4477 20.5 15 20.0523 15 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 19.5C25.5 18.9477 25.9477 18.5 26.5 18.5C27.0523 18.5 27.5 18.9477 27.5 19.5C27.5 20.0523 27.0523 20.5 26.5 20.5C25.9477 20.5 25.5 20.0523 25.5 19.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='29' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M4.5 23C4.5 22.4477 4.94772 22 5.5 22C6.05228 22 6.5 22.4477 6.5 23C6.5 23.5523 6.05228 24 5.5 24C4.94772 24 4.5 23.5523 4.5 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 23C8 22.4477 8.44772 22 9 22C9.55228 22 10 22.4477 10 23C10 23.5523 9.55228 24 9 24C8.44772 24 8 23.5523 8 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M11.5 23C11.5 22.4477 11.9477 22 12.5 22C13.0523 22 13.5 22.4477 13.5 23C13.5 23.5523 13.0523 24 12.5 24C11.9477 24 11.5 23.5523 11.5 23Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='15' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M18.5 23C18.5 22.4477 18.9477 22 19.5 22C20.0523 22 20.5 22.4477 20.5 23C20.5 23.5523 20.0523 24 19.5 24C18.9477 24 18.5 23.5523 18.5 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M4.5 26.5C4.5 25.9477 4.94772 25.5 5.5 25.5C6.05228 25.5 6.5 25.9477 6.5 26.5C6.5 27.0523 6.05228 27.5 5.5 27.5C4.94772 27.5 4.5 27.0523 4.5 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M8 26.5C8 25.9477 8.44772 25.5 9 25.5C9.55228 25.5 10 25.9477 10 26.5C10 27.0523 9.55228 27.5 9 27.5C8.44772 27.5 8 27.0523 8 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M18.5 26.5C18.5 25.9477 18.9477 25.5 19.5 25.5C20.0523 25.5 20.5 25.9477 20.5 26.5C20.5 27.0523 20.0523 27.5 19.5 27.5C18.9477 27.5 18.5 27.0523 18.5 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='22' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='25.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M29 26.5C29 25.9477 29.4477 25.5 30 25.5C30.5523 25.5 31 25.9477 31 26.5C31 27.0523 30.5523 27.5 30 27.5C29.4477 27.5 29 27.0523 29 26.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='1' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='4.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<rect x='8' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='18.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
|
||||
<path opacity='0.18' d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M25.5 30C25.5 29.4477 25.9477 29 26.5 29C27.0523 29 27.5 29.4477 27.5 30C27.5 30.5523 27.0523 31 26.5 31C25.9477 31 25.5 30.5523 25.5 30Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M29 30C29 29.4477 29.4477 29 30 29C30.5523 29 31 29.4477 31 30C31 30.5523 30.5523 31 30 31C29.4477 31 29 30.5523 29 30Z' fill='var(--color-text-quaternary)' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
167
dify/web/app/components/billing/plan/index.tsx
Normal file
167
dify/web/app/components/billing/plan/index.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
RiBook2Line,
|
||||
RiFileEditLine,
|
||||
RiGraduationCapLine,
|
||||
RiGroupLine,
|
||||
} from '@remixicon/react'
|
||||
import { Plan, SelfHostedPlan } from '../type'
|
||||
import { NUM_INFINITE } from '../config'
|
||||
import { getDaysUntilEndOfMonth } from '@/utils/time'
|
||||
import VectorSpaceInfo from '../usage-info/vector-space-info'
|
||||
import AppsInfo from '../usage-info/apps-info'
|
||||
import UpgradeBtn from '../upgrade-btn'
|
||||
import { ApiAggregate, TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import Button from '@/app/components/base/button'
|
||||
import UsageInfo from '@/app/components/billing/usage-info'
|
||||
import VerifyStateModal from '@/app/education-apply/verify-state-modal'
|
||||
import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
|
||||
import { useEducationVerify } from '@/service/use-education'
|
||||
import { useModalContextSelector } from '@/context/modal-context'
|
||||
import { Enterprise, Professional, Sandbox, Team } from './assets'
|
||||
|
||||
type Props = {
|
||||
loc: string
|
||||
}
|
||||
|
||||
const PlanComp: FC<Props> = ({
|
||||
loc,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const router = useRouter()
|
||||
const { userProfile } = useAppContext()
|
||||
const { plan, enableEducationPlan, allowRefreshEducationVerify, isEducationAccount } = useProviderContext()
|
||||
const isAboutToExpire = allowRefreshEducationVerify
|
||||
const {
|
||||
type,
|
||||
} = plan
|
||||
|
||||
const {
|
||||
usage,
|
||||
total,
|
||||
reset,
|
||||
} = plan
|
||||
const triggerEventsResetInDays = type === Plan.professional && total.triggerEvents !== NUM_INFINITE
|
||||
? reset.triggerEvents ?? undefined
|
||||
: undefined
|
||||
const apiRateLimitResetInDays = (() => {
|
||||
if (total.apiRateLimit === NUM_INFINITE)
|
||||
return undefined
|
||||
if (typeof reset.apiRateLimit === 'number')
|
||||
return reset.apiRateLimit
|
||||
if (type === Plan.sandbox)
|
||||
return getDaysUntilEndOfMonth()
|
||||
return undefined
|
||||
})()
|
||||
|
||||
const [showModal, setShowModal] = React.useState(false)
|
||||
const { mutateAsync } = useEducationVerify()
|
||||
const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
|
||||
const handleVerify = () => {
|
||||
mutateAsync().then((res) => {
|
||||
localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
|
||||
router.push(`/education-apply?token=${res.token}`)
|
||||
setShowAccountSettingModal(null)
|
||||
}).catch(() => {
|
||||
setShowModal(true)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div className='relative rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn'>
|
||||
<div className='p-6 pb-2'>
|
||||
{plan.type === Plan.sandbox && (
|
||||
<Sandbox />
|
||||
)}
|
||||
{plan.type === Plan.professional && (
|
||||
<Professional />
|
||||
)}
|
||||
{plan.type === Plan.team && (
|
||||
<Team />
|
||||
)}
|
||||
{(plan.type as any) === SelfHostedPlan.enterprise && (
|
||||
<Enterprise />
|
||||
)}
|
||||
<div className='mt-1 flex items-center'>
|
||||
<div className='grow'>
|
||||
<div className='mb-1 flex items-center gap-1'>
|
||||
<div className='system-md-semibold-uppercase text-text-primary'>{t(`billing.plans.${type}.name`)}</div>
|
||||
</div>
|
||||
<div className='system-xs-regular text-util-colors-gray-gray-600'>{t(`billing.plans.${type}.for`)}</div>
|
||||
</div>
|
||||
<div className='flex shrink-0 items-center gap-1'>
|
||||
{enableEducationPlan && (!isEducationAccount || isAboutToExpire) && (
|
||||
<Button variant='ghost' onClick={handleVerify}>
|
||||
<RiGraduationCapLine className='mr-1 h-4 w-4' />
|
||||
{t('education.toVerified')}
|
||||
</Button>
|
||||
)}
|
||||
{(plan.type as any) !== SelfHostedPlan.enterprise && (
|
||||
<UpgradeBtn
|
||||
className='shrink-0'
|
||||
isPlain={type === Plan.team}
|
||||
isShort
|
||||
loc={loc}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Plan detail */}
|
||||
<div className='grid grid-cols-3 content-start gap-1 p-2'>
|
||||
<AppsInfo />
|
||||
<UsageInfo
|
||||
Icon={RiGroupLine}
|
||||
name={t('billing.usagePage.teamMembers')}
|
||||
usage={usage.teamMembers}
|
||||
total={total.teamMembers}
|
||||
/>
|
||||
<UsageInfo
|
||||
Icon={RiBook2Line}
|
||||
name={t('billing.usagePage.documentsUploadQuota')}
|
||||
usage={usage.documentsUploadQuota}
|
||||
total={total.documentsUploadQuota}
|
||||
/>
|
||||
<VectorSpaceInfo />
|
||||
<UsageInfo
|
||||
Icon={RiFileEditLine}
|
||||
name={t('billing.usagePage.annotationQuota')}
|
||||
usage={usage.annotatedResponse}
|
||||
total={total.annotatedResponse}
|
||||
/>
|
||||
<UsageInfo
|
||||
Icon={TriggerAll}
|
||||
name={t('billing.usagePage.triggerEvents')}
|
||||
usage={usage.triggerEvents}
|
||||
total={total.triggerEvents}
|
||||
tooltip={t('billing.plansCommon.triggerEvents.tooltip') as string}
|
||||
resetInDays={triggerEventsResetInDays}
|
||||
/>
|
||||
<UsageInfo
|
||||
Icon={ApiAggregate}
|
||||
name={t('billing.plansCommon.apiRateLimit')}
|
||||
usage={usage.apiRateLimit}
|
||||
total={total.apiRateLimit}
|
||||
tooltip={total.apiRateLimit === NUM_INFINITE ? undefined : t('billing.plansCommon.apiRateLimitTooltip') as string}
|
||||
resetInDays={apiRateLimitResetInDays}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<VerifyStateModal
|
||||
showLink
|
||||
email={userProfile.email}
|
||||
isShow={showModal}
|
||||
title={t('education.rejectTitle')}
|
||||
content={t('education.rejectContent')}
|
||||
onConfirm={() => setShowModal(false)}
|
||||
onCancel={() => setShowModal(false)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(PlanComp)
|
||||
32
dify/web/app/components/billing/pricing/assets/cloud.tsx
Normal file
32
dify/web/app/components/billing/pricing/assets/cloud.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
type CloudProps = {
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
const Cloud = ({
|
||||
isActive,
|
||||
}: CloudProps) => {
|
||||
const color = isActive ? 'var(--color-saas-dify-blue-accessible)' : 'var(--color-text-primary)'
|
||||
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4630)'>
|
||||
<rect y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='6' y='6.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='12' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='12.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4630'>
|
||||
<rect width='16' height='16' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cloud
|
||||
96
dify/web/app/components/billing/pricing/assets/community.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/community.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Community = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='61' viewBox='0 0 60 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5128)'>
|
||||
<path opacity='0.18' d='M0 2.5C0 1.39543 0.895431 0.5 2 0.5C3.10457 0.5 4 1.39543 4 2.5C4 3.60457 3.10457 4.5 2 4.5C0.895431 4.5 0 3.60457 0 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 2.5C7 1.39543 7.89543 0.5 9 0.5C10.1046 0.5 11 1.39543 11 2.5C11 3.60457 10.1046 4.5 9 4.5C7.89543 4.5 7 3.60457 7 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 2.5C14 1.39543 14.8954 0.5 16 0.5C17.1046 0.5 18 1.39543 18 2.5C18 3.60457 17.1046 4.5 16 4.5C14.8954 4.5 14 3.60457 14 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 2.5C21 1.39543 21.8954 0.5 23 0.5C24.1046 0.5 25 1.39543 25 2.5C25 3.60457 24.1046 4.5 23 4.5C21.8954 4.5 21 3.60457 21 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 2.5C28 1.39543 28.8954 0.5 30 0.5C31.1046 0.5 32 1.39543 32 2.5C32 3.60457 31.1046 4.5 30 4.5C28.8954 4.5 28 3.60457 28 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 2.5C35 1.39543 35.8954 0.5 37 0.5C38.1046 0.5 39 1.39543 39 2.5C39 3.60457 38.1046 4.5 37 4.5C35.8954 4.5 35 3.60457 35 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 2.5C42 1.39543 42.8954 0.5 44 0.5C45.1046 0.5 46 1.39543 46 2.5C46 3.60457 45.1046 4.5 44 4.5C42.8954 4.5 42 3.60457 42 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 2.5C49 1.39543 49.8954 0.5 51 0.5C52.1046 0.5 53 1.39543 53 2.5C53 3.60457 52.1046 4.5 51 4.5C49.8954 4.5 49 3.60457 49 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 2.5C56 1.39543 56.8954 0.5 58 0.5C59.1046 0.5 60 1.39543 60 2.5C60 3.60457 59.1046 4.5 58 4.5C56.8954 4.5 56 3.60457 56 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 9.5C0 8.39543 0.895431 7.5 2 7.5C3.10457 7.5 4 8.39543 4 9.5C4 10.6046 3.10457 11.5 2 11.5C0.895431 11.5 0 10.6046 0 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 9.5C7 8.39543 7.89543 7.5 9 7.5C10.1046 7.5 11 8.39543 11 9.5C11 10.6046 10.1046 11.5 9 11.5C7.89543 11.5 7 10.6046 7 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 9.5C14 8.39543 14.8954 7.5 16 7.5C17.1046 7.5 18 8.39543 18 9.5C18 10.6046 17.1046 11.5 16 11.5C14.8954 11.5 14 10.6046 14 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 9.5C21 8.39543 21.8954 7.5 23 7.5C24.1046 7.5 25 8.39543 25 9.5C25 10.6046 24.1046 11.5 23 11.5C21.8954 11.5 21 10.6046 21 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 9.5C28 8.39543 28.8954 7.5 30 7.5C31.1046 7.5 32 8.39543 32 9.5C32 10.6046 31.1046 11.5 30 11.5C28.8954 11.5 28 10.6046 28 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 9.5C35 8.39543 35.8954 7.5 37 7.5C38.1046 7.5 39 8.39543 39 9.5C39 10.6046 38.1046 11.5 37 11.5C35.8954 11.5 35 10.6046 35 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 9.5C42 8.39543 42.8954 7.5 44 7.5C45.1046 7.5 46 8.39543 46 9.5C46 10.6046 45.1046 11.5 44 11.5C42.8954 11.5 42 10.6046 42 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 9.5C49 8.39543 49.8954 7.5 51 7.5C52.1046 7.5 53 8.39543 53 9.5C53 10.6046 52.1046 11.5 51 11.5C49.8954 11.5 49 10.6046 49 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 9.5C56 8.39543 56.8954 7.5 58 7.5C59.1046 7.5 60 8.39543 60 9.5C60 10.6046 59.1046 11.5 58 11.5C56.8954 11.5 56 10.6046 56 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 16.5C0 15.3954 0.895431 14.5 2 14.5C3.10457 14.5 4 15.3954 4 16.5C4 17.6046 3.10457 18.5 2 18.5C0.895431 18.5 0 17.6046 0 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 16.5C7 15.3954 7.89543 14.5 9 14.5C10.1046 14.5 11 15.3954 11 16.5C11 17.6046 10.1046 18.5 9 18.5C7.89543 18.5 7 17.6046 7 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 16.5C14 15.3954 14.8954 14.5 16 14.5C17.1046 14.5 18 15.3954 18 16.5C18 17.6046 17.1046 18.5 16 18.5C14.8954 18.5 14 17.6046 14 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 16.5C21 15.3954 21.8954 14.5 23 14.5C24.1046 14.5 25 15.3954 25 16.5C25 17.6046 24.1046 18.5 23 18.5C21.8954 18.5 21 17.6046 21 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 16.5C28 15.3954 28.8954 14.5 30 14.5C31.1046 14.5 32 15.3954 32 16.5C32 17.6046 31.1046 18.5 30 18.5C28.8954 18.5 28 17.6046 28 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 16.5C35 15.3954 35.8954 14.5 37 14.5C38.1046 14.5 39 15.3954 39 16.5C39 17.6046 38.1046 18.5 37 18.5C35.8954 18.5 35 17.6046 35 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 16.5C42 15.3954 42.8954 14.5 44 14.5C45.1046 14.5 46 15.3954 46 16.5C46 17.6046 45.1046 18.5 44 18.5C42.8954 18.5 42 17.6046 42 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 16.5C49 15.3954 49.8954 14.5 51 14.5C52.1046 14.5 53 15.3954 53 16.5C53 17.6046 52.1046 18.5 51 18.5C49.8954 18.5 49 17.6046 49 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 16.5C56 15.3954 56.8954 14.5 58 14.5C59.1046 14.5 60 15.3954 60 16.5C60 17.6046 59.1046 18.5 58 18.5C56.8954 18.5 56 17.6046 56 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 23.5C0 22.3954 0.895431 21.5 2 21.5C3.10457 21.5 4 22.3954 4 23.5C4 24.6046 3.10457 25.5 2 25.5C0.895431 25.5 0 24.6046 0 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 23.5C7 22.3954 7.89543 21.5 9 21.5C10.1046 21.5 11 22.3954 11 23.5C11 24.6046 10.1046 25.5 9 25.5C7.89543 25.5 7 24.6046 7 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 23.5C14 22.3954 14.8954 21.5 16 21.5C17.1046 21.5 18 22.3954 18 23.5C18 24.6046 17.1046 25.5 16 25.5C14.8954 25.5 14 24.6046 14 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 23.5C21 22.3954 21.8954 21.5 23 21.5C24.1046 21.5 25 22.3954 25 23.5C25 24.6046 24.1046 25.5 23 25.5C21.8954 25.5 21 24.6046 21 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 23.5C28 22.3954 28.8954 21.5 30 21.5C31.1046 21.5 32 22.3954 32 23.5C32 24.6046 31.1046 25.5 30 25.5C28.8954 25.5 28 24.6046 28 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 23.5C35 22.3954 35.8954 21.5 37 21.5C38.1046 21.5 39 22.3954 39 23.5C39 24.6046 38.1046 25.5 37 25.5C35.8954 25.5 35 24.6046 35 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 23.5C42 22.3954 42.8954 21.5 44 21.5C45.1046 21.5 46 22.3954 46 23.5C46 24.6046 45.1046 25.5 44 25.5C42.8954 25.5 42 24.6046 42 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 23.5C49 22.3954 49.8954 21.5 51 21.5C52.1046 21.5 53 22.3954 53 23.5C53 24.6046 52.1046 25.5 51 25.5C49.8954 25.5 49 24.6046 49 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 23.5C56 22.3954 56.8954 21.5 58 21.5C59.1046 21.5 60 22.3954 60 23.5C60 24.6046 59.1046 25.5 58 25.5C56.8954 25.5 56 24.6046 56 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 30.5C0 29.3954 0.895431 28.5 2 28.5C3.10457 28.5 4 29.3954 4 30.5C4 31.6046 3.10457 32.5 2 32.5C0.895431 32.5 0 31.6046 0 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 30.5C7 29.3954 7.89543 28.5 9 28.5C10.1046 28.5 11 29.3954 11 30.5C11 31.6046 10.1046 32.5 9 32.5C7.89543 32.5 7 31.6046 7 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 30.5C14 29.3954 14.8954 28.5 16 28.5C17.1046 28.5 18 29.3954 18 30.5C18 31.6046 17.1046 32.5 16 32.5C14.8954 32.5 14 31.6046 14 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 30.5C21 29.3954 21.8954 28.5 23 28.5C24.1046 28.5 25 29.3954 25 30.5C25 31.6046 24.1046 32.5 23 32.5C21.8954 32.5 21 31.6046 21 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 30.5C28 29.3954 28.8954 28.5 30 28.5C31.1046 28.5 32 29.3954 32 30.5C32 31.6046 31.1046 32.5 30 32.5C28.8954 32.5 28 31.6046 28 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 30.5C35 29.3954 35.8954 28.5 37 28.5C38.1046 28.5 39 29.3954 39 30.5C39 31.6046 38.1046 32.5 37 32.5C35.8954 32.5 35 31.6046 35 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 30.5C42 29.3954 42.8954 28.5 44 28.5C45.1046 28.5 46 29.3954 46 30.5C46 31.6046 45.1046 32.5 44 32.5C42.8954 32.5 42 31.6046 42 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 30.5C49 29.3954 49.8954 28.5 51 28.5C52.1046 28.5 53 29.3954 53 30.5C53 31.6046 52.1046 32.5 51 32.5C49.8954 32.5 49 31.6046 49 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 30.5C56 29.3954 56.8954 28.5 58 28.5C59.1046 28.5 60 29.3954 60 30.5C60 31.6046 59.1046 32.5 58 32.5C56.8954 32.5 56 31.6046 56 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 37.5C0 36.3954 0.895431 35.5 2 35.5C3.10457 35.5 4 36.3954 4 37.5C4 38.6046 3.10457 39.5 2 39.5C0.895431 39.5 0 38.6046 0 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 37.5C7 36.3954 7.89543 35.5 9 35.5C10.1046 35.5 11 36.3954 11 37.5C11 38.6046 10.1046 39.5 9 39.5C7.89543 39.5 7 38.6046 7 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 37.5C14 36.3954 14.8954 35.5 16 35.5C17.1046 35.5 18 36.3954 18 37.5C18 38.6046 17.1046 39.5 16 39.5C14.8954 39.5 14 38.6046 14 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 37.5C21 36.3954 21.8954 35.5 23 35.5C24.1046 35.5 25 36.3954 25 37.5C25 38.6046 24.1046 39.5 23 39.5C21.8954 39.5 21 38.6046 21 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 37.5C28 36.3954 28.8954 35.5 30 35.5C31.1046 35.5 32 36.3954 32 37.5C32 38.6046 31.1046 39.5 30 39.5C28.8954 39.5 28 38.6046 28 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 37.5C35 36.3954 35.8954 35.5 37 35.5C38.1046 35.5 39 36.3954 39 37.5C39 38.6046 38.1046 39.5 37 39.5C35.8954 39.5 35 38.6046 35 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 37.5C42 36.3954 42.8954 35.5 44 35.5C45.1046 35.5 46 36.3954 46 37.5C46 38.6046 45.1046 39.5 44 39.5C42.8954 39.5 42 38.6046 42 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 37.5C49 36.3954 49.8954 35.5 51 35.5C52.1046 35.5 53 36.3954 53 37.5C53 38.6046 52.1046 39.5 51 39.5C49.8954 39.5 49 38.6046 49 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 37.5C56 36.3954 56.8954 35.5 58 35.5C59.1046 35.5 60 36.3954 60 37.5C60 38.6046 59.1046 39.5 58 39.5C56.8954 39.5 56 38.6046 56 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 44.5C0 43.3954 0.895431 42.5 2 42.5C3.10457 42.5 4 43.3954 4 44.5C4 45.6046 3.10457 46.5 2 46.5C0.895431 46.5 0 45.6046 0 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 44.5C7 43.3954 7.89543 42.5 9 42.5C10.1046 42.5 11 43.3954 11 44.5C11 45.6046 10.1046 46.5 9 46.5C7.89543 46.5 7 45.6046 7 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 44.5C14 43.3954 14.8954 42.5 16 42.5C17.1046 42.5 18 43.3954 18 44.5C18 45.6046 17.1046 46.5 16 46.5C14.8954 46.5 14 45.6046 14 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 44.5C21 43.3954 21.8954 42.5 23 42.5C24.1046 42.5 25 43.3954 25 44.5C25 45.6046 24.1046 46.5 23 46.5C21.8954 46.5 21 45.6046 21 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 44.5C28 43.3954 28.8954 42.5 30 42.5C31.1046 42.5 32 43.3954 32 44.5C32 45.6046 31.1046 46.5 30 46.5C28.8954 46.5 28 45.6046 28 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 44.5C35 43.3954 35.8954 42.5 37 42.5C38.1046 42.5 39 43.3954 39 44.5C39 45.6046 38.1046 46.5 37 46.5C35.8954 46.5 35 45.6046 35 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 44.5C42 43.3954 42.8954 42.5 44 42.5C45.1046 42.5 46 43.3954 46 44.5C46 45.6046 45.1046 46.5 44 46.5C42.8954 46.5 42 45.6046 42 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 44.5C49 43.3954 49.8954 42.5 51 42.5C52.1046 42.5 53 43.3954 53 44.5C53 45.6046 52.1046 46.5 51 46.5C49.8954 46.5 49 45.6046 49 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 44.5C56 43.3954 56.8954 42.5 58 42.5C59.1046 42.5 60 43.3954 60 44.5C60 45.6046 59.1046 46.5 58 46.5C56.8954 46.5 56 45.6046 56 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 51.5C0 50.3954 0.895431 49.5 2 49.5C3.10457 49.5 4 50.3954 4 51.5C4 52.6046 3.10457 53.5 2 53.5C0.895431 53.5 0 52.6046 0 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 51.5C7 50.3954 7.89543 49.5 9 49.5C10.1046 49.5 11 50.3954 11 51.5C11 52.6046 10.1046 53.5 9 53.5C7.89543 53.5 7 52.6046 7 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 51.5C14 50.3954 14.8954 49.5 16 49.5C17.1046 49.5 18 50.3954 18 51.5C18 52.6046 17.1046 53.5 16 53.5C14.8954 53.5 14 52.6046 14 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 51.5C21 50.3954 21.8954 49.5 23 49.5C24.1046 49.5 25 50.3954 25 51.5C25 52.6046 24.1046 53.5 23 53.5C21.8954 53.5 21 52.6046 21 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 51.5C28 50.3954 28.8954 49.5 30 49.5C31.1046 49.5 32 50.3954 32 51.5C32 52.6046 31.1046 53.5 30 53.5C28.8954 53.5 28 52.6046 28 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 51.5C35 50.3954 35.8954 49.5 37 49.5C38.1046 49.5 39 50.3954 39 51.5C39 52.6046 38.1046 53.5 37 53.5C35.8954 53.5 35 52.6046 35 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 51.5C42 50.3954 42.8954 49.5 44 49.5C45.1046 49.5 46 50.3954 46 51.5C46 52.6046 45.1046 53.5 44 53.5C42.8954 53.5 42 52.6046 42 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 51.5C49 50.3954 49.8954 49.5 51 49.5C52.1046 49.5 53 50.3954 53 51.5C53 52.6046 52.1046 53.5 51 53.5C49.8954 53.5 49 52.6046 49 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 51.5C56 50.3954 56.8954 49.5 58 49.5C59.1046 49.5 60 50.3954 60 51.5C60 52.6046 59.1046 53.5 58 53.5C56.8954 53.5 56 52.6046 56 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 58.5C0 57.3954 0.895431 56.5 2 56.5C3.10457 56.5 4 57.3954 4 58.5C4 59.6046 3.10457 60.5 2 60.5C0.895431 60.5 0 59.6046 0 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 58.5C7 57.3954 7.89543 56.5 9 56.5C10.1046 56.5 11 57.3954 11 58.5C11 59.6046 10.1046 60.5 9 60.5C7.89543 60.5 7 59.6046 7 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 58.5C14 57.3954 14.8954 56.5 16 56.5C17.1046 56.5 18 57.3954 18 58.5C18 59.6046 17.1046 60.5 16 60.5C14.8954 60.5 14 59.6046 14 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 58.5C21 57.3954 21.8954 56.5 23 56.5C24.1046 56.5 25 57.3954 25 58.5C25 59.6046 24.1046 60.5 23 60.5C21.8954 60.5 21 59.6046 21 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 58.5C28 57.3954 28.8954 56.5 30 56.5C31.1046 56.5 32 57.3954 32 58.5C32 59.6046 31.1046 60.5 30 60.5C28.8954 60.5 28 59.6046 28 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 58.5C35 57.3954 35.8954 56.5 37 56.5C38.1046 56.5 39 57.3954 39 58.5C39 59.6046 38.1046 60.5 37 60.5C35.8954 60.5 35 59.6046 35 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 58.5C42 57.3954 42.8954 56.5 44 56.5C45.1046 56.5 46 57.3954 46 58.5C46 59.6046 45.1046 60.5 44 60.5C42.8954 60.5 42 59.6046 42 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 58.5C49 57.3954 49.8954 56.5 51 56.5C52.1046 56.5 53 57.3954 53 58.5C53 59.6046 52.1046 60.5 51 60.5C49.8954 60.5 49 59.6046 49 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 58.5C56 57.3954 56.8954 56.5 58 56.5C59.1046 56.5 60 57.3954 60 58.5C60 59.6046 59.1046 60.5 58 60.5C56.8954 60.5 56 59.6046 56 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5128'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Community
|
||||
@@ -0,0 +1,22 @@
|
||||
const EnterpriseNoise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.05' filter='url(#filter0_g_1_5499)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_1_5499' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_1_5499'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default EnterpriseNoise
|
||||
@@ -0,0 +1,96 @@
|
||||
const Enterprise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5366)'>
|
||||
<path d='M0.333496 2.5C0.333496 1.39543 1.22893 0.5 2.3335 0.5C3.43807 0.5 4.3335 1.39543 4.3335 2.5C4.3335 3.60457 3.43807 4.5 2.3335 4.5C1.22893 4.5 0.333496 3.60457 0.333496 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M7.3335 2.5C7.3335 1.39543 8.22893 0.5 9.3335 0.5C10.4381 0.5 11.3335 1.39543 11.3335 2.5C11.3335 3.60457 10.4381 4.5 9.3335 4.5C8.22893 4.5 7.3335 3.60457 7.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M14.3335 2.5C14.3335 1.39543 15.2289 0.5 16.3335 0.5C17.4381 0.5 18.3335 1.39543 18.3335 2.5C18.3335 3.60457 17.4381 4.5 16.3335 4.5C15.2289 4.5 14.3335 3.60457 14.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M21.3335 2.5C21.3335 1.39543 22.2289 0.5 23.3335 0.5C24.4381 0.5 25.3335 1.39543 25.3335 2.5C25.3335 3.60457 24.4381 4.5 23.3335 4.5C22.2289 4.5 21.3335 3.60457 21.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M28.3335 2.5C28.3335 1.39543 29.2289 0.5 30.3335 0.5C31.4381 0.5 32.3335 1.39543 32.3335 2.5C32.3335 3.60457 31.4381 4.5 30.3335 4.5C29.2289 4.5 28.3335 3.60457 28.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M35.3335 2.5C35.3335 1.39543 36.2289 0.5 37.3335 0.5C38.4381 0.5 39.3335 1.39543 39.3335 2.5C39.3335 3.60457 38.4381 4.5 37.3335 4.5C36.2289 4.5 35.3335 3.60457 35.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M42.3335 2.5C42.3335 1.39543 43.2289 0.5 44.3335 0.5C45.4381 0.5 46.3335 1.39543 46.3335 2.5C46.3335 3.60457 45.4381 4.5 44.3335 4.5C43.2289 4.5 42.3335 3.60457 42.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M49.3335 2.5C49.3335 1.39543 50.2289 0.5 51.3335 0.5C52.4381 0.5 53.3335 1.39543 53.3335 2.5C53.3335 3.60457 52.4381 4.5 51.3335 4.5C50.2289 4.5 49.3335 3.60457 49.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M56.3335 2.5C56.3335 1.39543 57.2289 0.5 58.3335 0.5C59.4381 0.5 60.3335 1.39543 60.3335 2.5C60.3335 3.60457 59.4381 4.5 58.3335 4.5C57.2289 4.5 56.3335 3.60457 56.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 9.5C0.333496 8.39543 1.22893 7.5 2.3335 7.5C3.43807 7.5 4.3335 8.39543 4.3335 9.5C4.3335 10.6046 3.43807 11.5 2.3335 11.5C1.22893 11.5 0.333496 10.6046 0.333496 9.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 9.5C7.3335 8.39543 8.22893 7.5 9.3335 7.5C10.4381 7.5 11.3335 8.39543 11.3335 9.5C11.3335 10.6046 10.4381 11.5 9.3335 11.5C8.22893 11.5 7.3335 10.6046 7.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 9.5C14.3335 8.39543 15.2289 7.5 16.3335 7.5C17.4381 7.5 18.3335 8.39543 18.3335 9.5C18.3335 10.6046 17.4381 11.5 16.3335 11.5C15.2289 11.5 14.3335 10.6046 14.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3335 9.5C21.3335 8.39543 22.2289 7.5 23.3335 7.5C24.4381 7.5 25.3335 8.39543 25.3335 9.5C25.3335 10.6046 24.4381 11.5 23.3335 11.5C22.2289 11.5 21.3335 10.6046 21.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3335 9.5C28.3335 8.39543 29.2289 7.5 30.3335 7.5C31.4381 7.5 32.3335 8.39543 32.3335 9.5C32.3335 10.6046 31.4381 11.5 30.3335 11.5C29.2289 11.5 28.3335 10.6046 28.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35.3335 9.5C35.3335 8.39543 36.2289 7.5 37.3335 7.5C38.4381 7.5 39.3335 8.39543 39.3335 9.5C39.3335 10.6046 38.4381 11.5 37.3335 11.5C36.2289 11.5 35.3335 10.6046 35.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3335 9.5C42.3335 8.39543 43.2289 7.5 44.3335 7.5C45.4381 7.5 46.3335 8.39543 46.3335 9.5C46.3335 10.6046 45.4381 11.5 44.3335 11.5C43.2289 11.5 42.3335 10.6046 42.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 9.5C49.3335 8.39543 50.2289 7.5 51.3335 7.5C52.4381 7.5 53.3335 8.39543 53.3335 9.5C53.3335 10.6046 52.4381 11.5 51.3335 11.5C50.2289 11.5 49.3335 10.6046 49.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 9.5C56.3335 8.39543 57.2289 7.5 58.3335 7.5C59.4381 7.5 60.3335 8.39543 60.3335 9.5C60.3335 10.6046 59.4381 11.5 58.3335 11.5C57.2289 11.5 56.3335 10.6046 56.3335 9.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 16.5C0.333496 15.3954 1.22893 14.5 2.3335 14.5C3.43807 14.5 4.3335 15.3954 4.3335 16.5C4.3335 17.6046 3.43807 18.5 2.3335 18.5C1.22893 18.5 0.333496 17.6046 0.333496 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 16.5C7.3335 15.3954 8.22893 14.5 9.3335 14.5C10.4381 14.5 11.3335 15.3954 11.3335 16.5C11.3335 17.6046 10.4381 18.5 9.3335 18.5C8.22893 18.5 7.3335 17.6046 7.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.3335 16.5C14.3335 15.3954 15.2289 14.5 16.3335 14.5C17.4381 14.5 18.3335 15.3954 18.3335 16.5C18.3335 17.6046 17.4381 18.5 16.3335 18.5C15.2289 18.5 14.3335 17.6046 14.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M21.3335 16.5C21.3335 15.3954 22.2289 14.5 23.3335 14.5C24.4381 14.5 25.3335 15.3954 25.3335 16.5C25.3335 17.6046 24.4381 18.5 23.3335 18.5C22.2289 18.5 21.3335 17.6046 21.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.3335 16.5C28.3335 15.3954 29.2289 14.5 30.3335 14.5C31.4381 14.5 32.3335 15.3954 32.3335 16.5C32.3335 17.6046 31.4381 18.5 30.3335 18.5C29.2289 18.5 28.3335 17.6046 28.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M35.3335 16.5C35.3335 15.3954 36.2289 14.5 37.3335 14.5C38.4381 14.5 39.3335 15.3954 39.3335 16.5C39.3335 17.6046 38.4381 18.5 37.3335 18.5C36.2289 18.5 35.3335 17.6046 35.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42.3335 16.5C42.3335 15.3954 43.2289 14.5 44.3335 14.5C45.4381 14.5 46.3335 15.3954 46.3335 16.5C46.3335 17.6046 45.4381 18.5 44.3335 18.5C43.2289 18.5 42.3335 17.6046 42.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M49.3335 16.5C49.3335 15.3954 50.2289 14.5 51.3335 14.5C52.4381 14.5 53.3335 15.3954 53.3335 16.5C53.3335 17.6046 52.4381 18.5 51.3335 18.5C50.2289 18.5 49.3335 17.6046 49.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 16.5C56.3335 15.3954 57.2289 14.5 58.3335 14.5C59.4381 14.5 60.3335 15.3954 60.3335 16.5C60.3335 17.6046 59.4381 18.5 58.3335 18.5C57.2289 18.5 56.3335 17.6046 56.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 23.5C0.333496 22.3954 1.22893 21.5 2.3335 21.5C3.43807 21.5 4.3335 22.3954 4.3335 23.5C4.3335 24.6046 3.43807 25.5 2.3335 25.5C1.22893 25.5 0.333496 24.6046 0.333496 23.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 23.5C7.3335 22.3954 8.22893 21.5 9.3335 21.5C10.4381 21.5 11.3335 22.3954 11.3335 23.5C11.3335 24.6046 10.4381 25.5 9.3335 25.5C8.22893 25.5 7.3335 24.6046 7.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 23.5C14.3335 22.3954 15.2289 21.5 16.3335 21.5C17.4381 21.5 18.3335 22.3954 18.3335 23.5C18.3335 24.6046 17.4381 25.5 16.3335 25.5C15.2289 25.5 14.3335 24.6046 14.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3335 23.5C21.3335 22.3954 22.2289 21.5 23.3335 21.5C24.4381 21.5 25.3335 22.3954 25.3335 23.5C25.3335 24.6046 24.4381 25.5 23.3335 25.5C22.2289 25.5 21.3335 24.6046 21.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3335 23.5C28.3335 22.3954 29.2289 21.5 30.3335 21.5C31.4381 21.5 32.3335 22.3954 32.3335 23.5C32.3335 24.6046 31.4381 25.5 30.3335 25.5C29.2289 25.5 28.3335 24.6046 28.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35.3335 23.5C35.3335 22.3954 36.2289 21.5 37.3335 21.5C38.4381 21.5 39.3335 22.3954 39.3335 23.5C39.3335 24.6046 38.4381 25.5 37.3335 25.5C36.2289 25.5 35.3335 24.6046 35.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3335 23.5C42.3335 22.3954 43.2289 21.5 44.3335 21.5C45.4381 21.5 46.3335 22.3954 46.3335 23.5C46.3335 24.6046 45.4381 25.5 44.3335 25.5C43.2289 25.5 42.3335 24.6046 42.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 23.5C49.3335 22.3954 50.2289 21.5 51.3335 21.5C52.4381 21.5 53.3335 22.3954 53.3335 23.5C53.3335 24.6046 52.4381 25.5 51.3335 25.5C50.2289 25.5 49.3335 24.6046 49.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 23.5C56.3335 22.3954 57.2289 21.5 58.3335 21.5C59.4381 21.5 60.3335 22.3954 60.3335 23.5C60.3335 24.6046 59.4381 25.5 58.3335 25.5C57.2289 25.5 56.3335 24.6046 56.3335 23.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 30.5C0.333496 29.3954 1.22893 28.5 2.3335 28.5C3.43807 28.5 4.3335 29.3954 4.3335 30.5C4.3335 31.6046 3.43807 32.5 2.3335 32.5C1.22893 32.5 0.333496 31.6046 0.333496 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 30.5C7.3335 29.3954 8.22893 28.5 9.3335 28.5C10.4381 28.5 11.3335 29.3954 11.3335 30.5C11.3335 31.6046 10.4381 32.5 9.3335 32.5C8.22893 32.5 7.3335 31.6046 7.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.3335 30.5C14.3335 29.3954 15.2289 28.5 16.3335 28.5C17.4381 28.5 18.3335 29.3954 18.3335 30.5C18.3335 31.6046 17.4381 32.5 16.3335 32.5C15.2289 32.5 14.3335 31.6046 14.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M21.3335 30.5C21.3335 29.3954 22.2289 28.5 23.3335 28.5C24.4381 28.5 25.3335 29.3954 25.3335 30.5C25.3335 31.6046 24.4381 32.5 23.3335 32.5C22.2289 32.5 21.3335 31.6046 21.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.3335 30.5C28.3335 29.3954 29.2289 28.5 30.3335 28.5C31.4381 28.5 32.3335 29.3954 32.3335 30.5C32.3335 31.6046 31.4381 32.5 30.3335 32.5C29.2289 32.5 28.3335 31.6046 28.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M35.3335 30.5C35.3335 29.3954 36.2289 28.5 37.3335 28.5C38.4381 28.5 39.3335 29.3954 39.3335 30.5C39.3335 31.6046 38.4381 32.5 37.3335 32.5C36.2289 32.5 35.3335 31.6046 35.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42.3335 30.5C42.3335 29.3954 43.2289 28.5 44.3335 28.5C45.4381 28.5 46.3335 29.3954 46.3335 30.5C46.3335 31.6046 45.4381 32.5 44.3335 32.5C43.2289 32.5 42.3335 31.6046 42.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M49.3335 30.5C49.3335 29.3954 50.2289 28.5 51.3335 28.5C52.4381 28.5 53.3335 29.3954 53.3335 30.5C53.3335 31.6046 52.4381 32.5 51.3335 32.5C50.2289 32.5 49.3335 31.6046 49.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 30.5C56.3335 29.3954 57.2289 28.5 58.3335 28.5C59.4381 28.5 60.3335 29.3954 60.3335 30.5C60.3335 31.6046 59.4381 32.5 58.3335 32.5C57.2289 32.5 56.3335 31.6046 56.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 37.5C0.333496 36.3954 1.22893 35.5 2.3335 35.5C3.43807 35.5 4.3335 36.3954 4.3335 37.5C4.3335 38.6046 3.43807 39.5 2.3335 39.5C1.22893 39.5 0.333496 38.6046 0.333496 37.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 37.5C7.3335 36.3954 8.22893 35.5 9.3335 35.5C10.4381 35.5 11.3335 36.3954 11.3335 37.5C11.3335 38.6046 10.4381 39.5 9.3335 39.5C8.22893 39.5 7.3335 38.6046 7.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 37.5C14.3335 36.3954 15.2289 35.5 16.3335 35.5C17.4381 35.5 18.3335 36.3954 18.3335 37.5C18.3335 38.6046 17.4381 39.5 16.3335 39.5C15.2289 39.5 14.3335 38.6046 14.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3335 37.5C21.3335 36.3954 22.2289 35.5 23.3335 35.5C24.4381 35.5 25.3335 36.3954 25.3335 37.5C25.3335 38.6046 24.4381 39.5 23.3335 39.5C22.2289 39.5 21.3335 38.6046 21.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3335 37.5C28.3335 36.3954 29.2289 35.5 30.3335 35.5C31.4381 35.5 32.3335 36.3954 32.3335 37.5C32.3335 38.6046 31.4381 39.5 30.3335 39.5C29.2289 39.5 28.3335 38.6046 28.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35.3335 37.5C35.3335 36.3954 36.2289 35.5 37.3335 35.5C38.4381 35.5 39.3335 36.3954 39.3335 37.5C39.3335 38.6046 38.4381 39.5 37.3335 39.5C36.2289 39.5 35.3335 38.6046 35.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3335 37.5C42.3335 36.3954 43.2289 35.5 44.3335 35.5C45.4381 35.5 46.3335 36.3954 46.3335 37.5C46.3335 38.6046 45.4381 39.5 44.3335 39.5C43.2289 39.5 42.3335 38.6046 42.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 37.5C49.3335 36.3954 50.2289 35.5 51.3335 35.5C52.4381 35.5 53.3335 36.3954 53.3335 37.5C53.3335 38.6046 52.4381 39.5 51.3335 39.5C50.2289 39.5 49.3335 38.6046 49.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 37.5C56.3335 36.3954 57.2289 35.5 58.3335 35.5C59.4381 35.5 60.3335 36.3954 60.3335 37.5C60.3335 38.6046 59.4381 39.5 58.3335 39.5C57.2289 39.5 56.3335 38.6046 56.3335 37.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 44.5C0.333496 43.3954 1.22893 42.5 2.3335 42.5C3.43807 42.5 4.3335 43.3954 4.3335 44.5C4.3335 45.6046 3.43807 46.5 2.3335 46.5C1.22893 46.5 0.333496 45.6046 0.333496 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 44.5C7.3335 43.3954 8.22893 42.5 9.3335 42.5C10.4381 42.5 11.3335 43.3954 11.3335 44.5C11.3335 45.6046 10.4381 46.5 9.3335 46.5C8.22893 46.5 7.3335 45.6046 7.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 44.5C14.3335 43.3954 15.2289 42.5 16.3335 42.5C17.4381 42.5 18.3335 43.3954 18.3335 44.5C18.3335 45.6046 17.4381 46.5 16.3335 46.5C15.2289 46.5 14.3335 45.6046 14.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21.3335 44.5C21.3335 43.3954 22.2289 42.5 23.3335 42.5C24.4381 42.5 25.3335 43.3954 25.3335 44.5C25.3335 45.6046 24.4381 46.5 23.3335 46.5C22.2289 46.5 21.3335 45.6046 21.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M28.3335 44.5C28.3335 43.3954 29.2289 42.5 30.3335 42.5C31.4381 42.5 32.3335 43.3954 32.3335 44.5C32.3335 45.6046 31.4381 46.5 30.3335 46.5C29.2289 46.5 28.3335 45.6046 28.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M35.3335 44.5C35.3335 43.3954 36.2289 42.5 37.3335 42.5C38.4381 42.5 39.3335 43.3954 39.3335 44.5C39.3335 45.6046 38.4381 46.5 37.3335 46.5C36.2289 46.5 35.3335 45.6046 35.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M42.3335 44.5C42.3335 43.3954 43.2289 42.5 44.3335 42.5C45.4381 42.5 46.3335 43.3954 46.3335 44.5C46.3335 45.6046 45.4381 46.5 44.3335 46.5C43.2289 46.5 42.3335 45.6046 42.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 44.5C49.3335 43.3954 50.2289 42.5 51.3335 42.5C52.4381 42.5 53.3335 43.3954 53.3335 44.5C53.3335 45.6046 52.4381 46.5 51.3335 46.5C50.2289 46.5 49.3335 45.6046 49.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 44.5C56.3335 43.3954 57.2289 42.5 58.3335 42.5C59.4381 42.5 60.3335 43.3954 60.3335 44.5C60.3335 45.6046 59.4381 46.5 58.3335 46.5C57.2289 46.5 56.3335 45.6046 56.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 51.5C0.333496 50.3954 1.22893 49.5 2.3335 49.5C3.43807 49.5 4.3335 50.3954 4.3335 51.5C4.3335 52.6046 3.43807 53.5 2.3335 53.5C1.22893 53.5 0.333496 52.6046 0.333496 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 51.5C7.3335 50.3954 8.22893 49.5 9.3335 49.5C10.4381 49.5 11.3335 50.3954 11.3335 51.5C11.3335 52.6046 10.4381 53.5 9.3335 53.5C8.22893 53.5 7.3335 52.6046 7.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 51.5C14.3335 50.3954 15.2289 49.5 16.3335 49.5C17.4381 49.5 18.3335 50.3954 18.3335 51.5C18.3335 52.6046 17.4381 53.5 16.3335 53.5C15.2289 53.5 14.3335 52.6046 14.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21.3335 51.5C21.3335 50.3954 22.2289 49.5 23.3335 49.5C24.4381 49.5 25.3335 50.3954 25.3335 51.5C25.3335 52.6046 24.4381 53.5 23.3335 53.5C22.2289 53.5 21.3335 52.6046 21.3335 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M28.3335 51.5C28.3335 50.3954 29.2289 49.5 30.3335 49.5C31.4381 49.5 32.3335 50.3954 32.3335 51.5C32.3335 52.6046 31.4381 53.5 30.3335 53.5C29.2289 53.5 28.3335 52.6046 28.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.3335 51.5C35.3335 50.3954 36.2289 49.5 37.3335 49.5C38.4381 49.5 39.3335 50.3954 39.3335 51.5C39.3335 52.6046 38.4381 53.5 37.3335 53.5C36.2289 53.5 35.3335 52.6046 35.3335 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M42.3335 51.5C42.3335 50.3954 43.2289 49.5 44.3335 49.5C45.4381 49.5 46.3335 50.3954 46.3335 51.5C46.3335 52.6046 45.4381 53.5 44.3335 53.5C43.2289 53.5 42.3335 52.6046 42.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 51.5C49.3335 50.3954 50.2289 49.5 51.3335 49.5C52.4381 49.5 53.3335 50.3954 53.3335 51.5C53.3335 52.6046 52.4381 53.5 51.3335 53.5C50.2289 53.5 49.3335 52.6046 49.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 51.5C56.3335 50.3954 57.2289 49.5 58.3335 49.5C59.4381 49.5 60.3335 50.3954 60.3335 51.5C60.3335 52.6046 59.4381 53.5 58.3335 53.5C57.2289 53.5 56.3335 52.6046 56.3335 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 58.5C0.333496 57.3954 1.22893 56.5 2.3335 56.5C3.43807 56.5 4.3335 57.3954 4.3335 58.5C4.3335 59.6046 3.43807 60.5 2.3335 60.5C1.22893 60.5 0.333496 59.6046 0.333496 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 58.5C7.3335 57.3954 8.22893 56.5 9.3335 56.5C10.4381 56.5 11.3335 57.3954 11.3335 58.5C11.3335 59.6046 10.4381 60.5 9.3335 60.5C8.22893 60.5 7.3335 59.6046 7.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 58.5C14.3335 57.3954 15.2289 56.5 16.3335 56.5C17.4381 56.5 18.3335 57.3954 18.3335 58.5C18.3335 59.6046 17.4381 60.5 16.3335 60.5C15.2289 60.5 14.3335 59.6046 14.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21.3335 58.5C21.3335 57.3954 22.2289 56.5 23.3335 56.5C24.4381 56.5 25.3335 57.3954 25.3335 58.5C25.3335 59.6046 24.4381 60.5 23.3335 60.5C22.2289 60.5 21.3335 59.6046 21.3335 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M28.3335 58.5C28.3335 57.3954 29.2289 56.5 30.3335 56.5C31.4381 56.5 32.3335 57.3954 32.3335 58.5C32.3335 59.6046 31.4381 60.5 30.3335 60.5C29.2289 60.5 28.3335 59.6046 28.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.3335 58.5C35.3335 57.3954 36.2289 56.5 37.3335 56.5C38.4381 56.5 39.3335 57.3954 39.3335 58.5C39.3335 59.6046 38.4381 60.5 37.3335 60.5C36.2289 60.5 35.3335 59.6046 35.3335 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M42.3335 58.5C42.3335 57.3954 43.2289 56.5 44.3335 56.5C45.4381 56.5 46.3335 57.3954 46.3335 58.5C46.3335 59.6046 45.4381 60.5 44.3335 60.5C43.2289 60.5 42.3335 59.6046 42.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 58.5C49.3335 57.3954 50.2289 56.5 51.3335 56.5C52.4381 56.5 53.3335 57.3954 53.3335 58.5C53.3335 59.6046 52.4381 60.5 51.3335 60.5C50.2289 60.5 49.3335 59.6046 49.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 58.5C56.3335 57.3954 57.2289 56.5 58.3335 56.5C59.4381 56.5 60.3335 57.3954 60.3335 58.5C60.3335 59.6046 59.4381 60.5 58.3335 60.5C57.2289 60.5 56.3335 59.6046 56.3335 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5366'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.333496 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Enterprise
|
||||
12
dify/web/app/components/billing/pricing/assets/index.tsx
Normal file
12
dify/web/app/components/billing/pricing/assets/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export { default as Cloud } from './cloud'
|
||||
export { default as SelfHosted } from './self-hosted'
|
||||
export { default as Sandbox } from './sandbox'
|
||||
export { default as Professional } from './professional'
|
||||
export { default as Team } from './team'
|
||||
export { default as Community } from './community'
|
||||
export { default as Premium } from './premium'
|
||||
export { default as Enterprise } from './enterprise'
|
||||
export { default as NoiseTop } from './noise-top'
|
||||
export { default as NoiseBottom } from './noise-bottom'
|
||||
export { default as PremiumNoise } from './premium-noise'
|
||||
export { default as EnterpriseNoise } from './enterprise-noise'
|
||||
@@ -0,0 +1,22 @@
|
||||
const NoiseBottom = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.1' filter='url(#filter0_g_1_5505)'>
|
||||
<rect y='52' width='100%' height='96' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_1_5505' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_1_5505'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoiseBottom
|
||||
22
dify/web/app/components/billing/pricing/assets/noise-top.tsx
Normal file
22
dify/web/app/components/billing/pricing/assets/noise-top.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
const NoiseTop = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.1' filter='url(#filter0_g_2_13388)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_2_13388' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_2_13388'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoiseTop
|
||||
@@ -0,0 +1,22 @@
|
||||
const PremiumNoise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.05' filter='url(#filter0_g_1_5238)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-text-warning)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_1_5238' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_1_5238'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default PremiumNoise
|
||||
96
dify/web/app/components/billing/pricing/assets/premium.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/premium.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Premium = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5240)'>
|
||||
<path opacity='0.18' d='M0.666748 2.5C0.666748 1.39543 1.56218 0.5 2.66675 0.5C3.77132 0.5 4.66675 1.39543 4.66675 2.5C4.66675 3.60457 3.77132 4.5 2.66675 4.5C1.56218 4.5 0.666748 3.60457 0.666748 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 2.5C7.66675 1.39543 8.56218 0.5 9.66675 0.5C10.7713 0.5 11.6667 1.39543 11.6667 2.5C11.6667 3.60457 10.7713 4.5 9.66675 4.5C8.56218 4.5 7.66675 3.60457 7.66675 2.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M14.6667 2.5C14.6667 1.39543 15.5622 0.5 16.6667 0.5C17.7713 0.5 18.6667 1.39543 18.6667 2.5C18.6667 3.60457 17.7713 4.5 16.6667 4.5C15.5622 4.5 14.6667 3.60457 14.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 2.5C21.6667 1.39543 22.5622 0.5 23.6667 0.5C24.7713 0.5 25.6667 1.39543 25.6667 2.5C25.6667 3.60457 24.7713 4.5 23.6667 4.5C22.5622 4.5 21.6667 3.60457 21.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 2.5C28.6667 1.39543 29.5622 0.5 30.6667 0.5C31.7713 0.5 32.6667 1.39543 32.6667 2.5C32.6667 3.60457 31.7713 4.5 30.6667 4.5C29.5622 4.5 28.6667 3.60457 28.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 2.5C35.6667 1.39543 36.5622 0.5 37.6667 0.5C38.7713 0.5 39.6667 1.39543 39.6667 2.5C39.6667 3.60457 38.7713 4.5 37.6667 4.5C36.5622 4.5 35.6667 3.60457 35.6667 2.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 2.5C42.6667 1.39543 43.5622 0.5 44.6667 0.5C45.7713 0.5 46.6667 1.39543 46.6667 2.5C46.6667 3.60457 45.7713 4.5 44.6667 4.5C43.5622 4.5 42.6667 3.60457 42.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 2.5C49.6667 1.39543 50.5622 0.5 51.6667 0.5C52.7713 0.5 53.6667 1.39543 53.6667 2.5C53.6667 3.60457 52.7713 4.5 51.6667 4.5C50.5622 4.5 49.6667 3.60457 49.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 2.5C56.6667 1.39543 57.5622 0.5 58.6667 0.5C59.7713 0.5 60.6667 1.39543 60.6667 2.5C60.6667 3.60457 59.7713 4.5 58.6667 4.5C57.5622 4.5 56.6667 3.60457 56.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0.666748 9.5C0.666748 8.39543 1.56218 7.5 2.66675 7.5C3.77132 7.5 4.66675 8.39543 4.66675 9.5C4.66675 10.6046 3.77132 11.5 2.66675 11.5C1.56218 11.5 0.666748 10.6046 0.666748 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M7.66675 9.5C7.66675 8.39543 8.56218 7.5 9.66675 7.5C10.7713 7.5 11.6667 8.39543 11.6667 9.5C11.6667 10.6046 10.7713 11.5 9.66675 11.5C8.56218 11.5 7.66675 10.6046 7.66675 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M14.6667 9.5C14.6667 8.39543 15.5622 7.5 16.6667 7.5C17.7713 7.5 18.6667 8.39543 18.6667 9.5C18.6667 10.6046 17.7713 11.5 16.6667 11.5C15.5622 11.5 14.6667 10.6046 14.6667 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 9.5C21.6667 8.39543 22.5622 7.5 23.6667 7.5C24.7713 7.5 25.6667 8.39543 25.6667 9.5C25.6667 10.6046 24.7713 11.5 23.6667 11.5C22.5622 11.5 21.6667 10.6046 21.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 9.5C28.6667 8.39543 29.5622 7.5 30.6667 7.5C31.7713 7.5 32.6667 8.39543 32.6667 9.5C32.6667 10.6046 31.7713 11.5 30.6667 11.5C29.5622 11.5 28.6667 10.6046 28.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 9.5C35.6667 8.39543 36.5622 7.5 37.6667 7.5C38.7713 7.5 39.6667 8.39543 39.6667 9.5C39.6667 10.6046 38.7713 11.5 37.6667 11.5C36.5622 11.5 35.6667 10.6046 35.6667 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 9.5C42.6667 8.39543 43.5622 7.5 44.6667 7.5C45.7713 7.5 46.6667 8.39543 46.6667 9.5C46.6667 10.6046 45.7713 11.5 44.6667 11.5C43.5622 11.5 42.6667 10.6046 42.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 9.5C49.6667 8.39543 50.5622 7.5 51.6667 7.5C52.7713 7.5 53.6667 8.39543 53.6667 9.5C53.6667 10.6046 52.7713 11.5 51.6667 11.5C50.5622 11.5 49.6667 10.6046 49.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 9.5C56.6667 8.39543 57.5622 7.5 58.6667 7.5C59.7713 7.5 60.6667 8.39543 60.6667 9.5C60.6667 10.6046 59.7713 11.5 58.6667 11.5C57.5622 11.5 56.6667 10.6046 56.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 16.5C0.666748 15.3954 1.56218 14.5 2.66675 14.5C3.77132 14.5 4.66675 15.3954 4.66675 16.5C4.66675 17.6046 3.77132 18.5 2.66675 18.5C1.56218 18.5 0.666748 17.6046 0.666748 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 16.5C7.66675 15.3954 8.56218 14.5 9.66675 14.5C10.7713 14.5 11.6667 15.3954 11.6667 16.5C11.6667 17.6046 10.7713 18.5 9.66675 18.5C8.56218 18.5 7.66675 17.6046 7.66675 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M14.6667 16.5C14.6667 15.3954 15.5622 14.5 16.6667 14.5C17.7713 14.5 18.6667 15.3954 18.6667 16.5C18.6667 17.6046 17.7713 18.5 16.6667 18.5C15.5622 18.5 14.6667 17.6046 14.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 16.5C21.6667 15.3954 22.5622 14.5 23.6667 14.5C24.7713 14.5 25.6667 15.3954 25.6667 16.5C25.6667 17.6046 24.7713 18.5 23.6667 18.5C22.5622 18.5 21.6667 17.6046 21.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.6667 16.5C28.6667 15.3954 29.5622 14.5 30.6667 14.5C31.7713 14.5 32.6667 15.3954 32.6667 16.5C32.6667 17.6046 31.7713 18.5 30.6667 18.5C29.5622 18.5 28.6667 17.6046 28.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 16.5C35.6667 15.3954 36.5622 14.5 37.6667 14.5C38.7713 14.5 39.6667 15.3954 39.6667 16.5C39.6667 17.6046 38.7713 18.5 37.6667 18.5C36.5622 18.5 35.6667 17.6046 35.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 16.5C42.6667 15.3954 43.5622 14.5 44.6667 14.5C45.7713 14.5 46.6667 15.3954 46.6667 16.5C46.6667 17.6046 45.7713 18.5 44.6667 18.5C43.5622 18.5 42.6667 17.6046 42.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M49.6667 16.5C49.6667 15.3954 50.5622 14.5 51.6667 14.5C52.7713 14.5 53.6667 15.3954 53.6667 16.5C53.6667 17.6046 52.7713 18.5 51.6667 18.5C50.5622 18.5 49.6667 17.6046 49.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 16.5C56.6667 15.3954 57.5622 14.5 58.6667 14.5C59.7713 14.5 60.6667 15.3954 60.6667 16.5C60.6667 17.6046 59.7713 18.5 58.6667 18.5C57.5622 18.5 56.6667 17.6046 56.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 23.5C0.666748 22.3954 1.56218 21.5 2.66675 21.5C3.77132 21.5 4.66675 22.3954 4.66675 23.5C4.66675 24.6046 3.77132 25.5 2.66675 25.5C1.56218 25.5 0.666748 24.6046 0.666748 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 23.5C7.66675 22.3954 8.56218 21.5 9.66675 21.5C10.7713 21.5 11.6667 22.3954 11.6667 23.5C11.6667 24.6046 10.7713 25.5 9.66675 25.5C8.56218 25.5 7.66675 24.6046 7.66675 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 23.5C14.6667 22.3954 15.5622 21.5 16.6667 21.5C17.7713 21.5 18.6667 22.3954 18.6667 23.5C18.6667 24.6046 17.7713 25.5 16.6667 25.5C15.5622 25.5 14.6667 24.6046 14.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M21.6667 23.5C21.6667 22.3954 22.5622 21.5 23.6667 21.5C24.7713 21.5 25.6667 22.3954 25.6667 23.5C25.6667 24.6046 24.7713 25.5 23.6667 25.5C22.5622 25.5 21.6667 24.6046 21.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M28.6667 23.5C28.6667 22.3954 29.5622 21.5 30.6667 21.5C31.7713 21.5 32.6667 22.3954 32.6667 23.5C32.6667 24.6046 31.7713 25.5 30.6667 25.5C29.5622 25.5 28.6667 24.6046 28.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 23.5C35.6667 22.3954 36.5622 21.5 37.6667 21.5C38.7713 21.5 39.6667 22.3954 39.6667 23.5C39.6667 24.6046 38.7713 25.5 37.6667 25.5C36.5622 25.5 35.6667 24.6046 35.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 23.5C42.6667 22.3954 43.5622 21.5 44.6667 21.5C45.7713 21.5 46.6667 22.3954 46.6667 23.5C46.6667 24.6046 45.7713 25.5 44.6667 25.5C43.5622 25.5 42.6667 24.6046 42.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M49.6667 23.5C49.6667 22.3954 50.5622 21.5 51.6667 21.5C52.7713 21.5 53.6667 22.3954 53.6667 23.5C53.6667 24.6046 52.7713 25.5 51.6667 25.5C50.5622 25.5 49.6667 24.6046 49.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M56.6667 23.5C56.6667 22.3954 57.5622 21.5 58.6667 21.5C59.7713 21.5 60.6667 22.3954 60.6667 23.5C60.6667 24.6046 59.7713 25.5 58.6667 25.5C57.5622 25.5 56.6667 24.6046 56.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M0.666748 30.5C0.666748 29.3954 1.56218 28.5 2.66675 28.5C3.77132 28.5 4.66675 29.3954 4.66675 30.5C4.66675 31.6046 3.77132 32.5 2.66675 32.5C1.56218 32.5 0.666748 31.6046 0.666748 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 30.5C7.66675 29.3954 8.56218 28.5 9.66675 28.5C10.7713 28.5 11.6667 29.3954 11.6667 30.5C11.6667 31.6046 10.7713 32.5 9.66675 32.5C8.56218 32.5 7.66675 31.6046 7.66675 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.6667 30.5C14.6667 29.3954 15.5622 28.5 16.6667 28.5C17.7713 28.5 18.6667 29.3954 18.6667 30.5C18.6667 31.6046 17.7713 32.5 16.6667 32.5C15.5622 32.5 14.6667 31.6046 14.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 30.5C21.6667 29.3954 22.5622 28.5 23.6667 28.5C24.7713 28.5 25.6667 29.3954 25.6667 30.5C25.6667 31.6046 24.7713 32.5 23.6667 32.5C22.5622 32.5 21.6667 31.6046 21.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.6667 30.5C28.6667 29.3954 29.5622 28.5 30.6667 28.5C31.7713 28.5 32.6667 29.3954 32.6667 30.5C32.6667 31.6046 31.7713 32.5 30.6667 32.5C29.5622 32.5 28.6667 31.6046 28.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 30.5C35.6667 29.3954 36.5622 28.5 37.6667 28.5C38.7713 28.5 39.6667 29.3954 39.6667 30.5C39.6667 31.6046 38.7713 32.5 37.6667 32.5C36.5622 32.5 35.6667 31.6046 35.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 30.5C42.6667 29.3954 43.5622 28.5 44.6667 28.5C45.7713 28.5 46.6667 29.3954 46.6667 30.5C46.6667 31.6046 45.7713 32.5 44.6667 32.5C43.5622 32.5 42.6667 31.6046 42.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M49.6667 30.5C49.6667 29.3954 50.5622 28.5 51.6667 28.5C52.7713 28.5 53.6667 29.3954 53.6667 30.5C53.6667 31.6046 52.7713 32.5 51.6667 32.5C50.5622 32.5 49.6667 31.6046 49.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 30.5C56.6667 29.3954 57.5622 28.5 58.6667 28.5C59.7713 28.5 60.6667 29.3954 60.6667 30.5C60.6667 31.6046 59.7713 32.5 58.6667 32.5C57.5622 32.5 56.6667 31.6046 56.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 37.5C0.666748 36.3954 1.56218 35.5 2.66675 35.5C3.77132 35.5 4.66675 36.3954 4.66675 37.5C4.66675 38.6046 3.77132 39.5 2.66675 39.5C1.56218 39.5 0.666748 38.6046 0.666748 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 37.5C7.66675 36.3954 8.56218 35.5 9.66675 35.5C10.7713 35.5 11.6667 36.3954 11.6667 37.5C11.6667 38.6046 10.7713 39.5 9.66675 39.5C8.56218 39.5 7.66675 38.6046 7.66675 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 37.5C14.6667 36.3954 15.5622 35.5 16.6667 35.5C17.7713 35.5 18.6667 36.3954 18.6667 37.5C18.6667 38.6046 17.7713 39.5 16.6667 39.5C15.5622 39.5 14.6667 38.6046 14.6667 37.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 37.5C21.6667 36.3954 22.5622 35.5 23.6667 35.5C24.7713 35.5 25.6667 36.3954 25.6667 37.5C25.6667 38.6046 24.7713 39.5 23.6667 39.5C22.5622 39.5 21.6667 38.6046 21.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 37.5C28.6667 36.3954 29.5622 35.5 30.6667 35.5C31.7713 35.5 32.6667 36.3954 32.6667 37.5C32.6667 38.6046 31.7713 39.5 30.6667 39.5C29.5622 39.5 28.6667 38.6046 28.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 37.5C35.6667 36.3954 36.5622 35.5 37.6667 35.5C38.7713 35.5 39.6667 36.3954 39.6667 37.5C39.6667 38.6046 38.7713 39.5 37.6667 39.5C36.5622 39.5 35.6667 38.6046 35.6667 37.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 37.5C42.6667 36.3954 43.5622 35.5 44.6667 35.5C45.7713 35.5 46.6667 36.3954 46.6667 37.5C46.6667 38.6046 45.7713 39.5 44.6667 39.5C43.5622 39.5 42.6667 38.6046 42.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 37.5C49.6667 36.3954 50.5622 35.5 51.6667 35.5C52.7713 35.5 53.6667 36.3954 53.6667 37.5C53.6667 38.6046 52.7713 39.5 51.6667 39.5C50.5622 39.5 49.6667 38.6046 49.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 37.5C56.6667 36.3954 57.5622 35.5 58.6667 35.5C59.7713 35.5 60.6667 36.3954 60.6667 37.5C60.6667 38.6046 59.7713 39.5 58.6667 39.5C57.5622 39.5 56.6667 38.6046 56.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 44.5C0.666748 43.3954 1.56218 42.5 2.66675 42.5C3.77132 42.5 4.66675 43.3954 4.66675 44.5C4.66675 45.6046 3.77132 46.5 2.66675 46.5C1.56218 46.5 0.666748 45.6046 0.666748 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 44.5C7.66675 43.3954 8.56218 42.5 9.66675 42.5C10.7713 42.5 11.6667 43.3954 11.6667 44.5C11.6667 45.6046 10.7713 46.5 9.66675 46.5C8.56218 46.5 7.66675 45.6046 7.66675 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M14.6667 44.5C14.6667 43.3954 15.5622 42.5 16.6667 42.5C17.7713 42.5 18.6667 43.3954 18.6667 44.5C18.6667 45.6046 17.7713 46.5 16.6667 46.5C15.5622 46.5 14.6667 45.6046 14.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M21.6667 44.5C21.6667 43.3954 22.5622 42.5 23.6667 42.5C24.7713 42.5 25.6667 43.3954 25.6667 44.5C25.6667 45.6046 24.7713 46.5 23.6667 46.5C22.5622 46.5 21.6667 45.6046 21.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M28.6667 44.5C28.6667 43.3954 29.5622 42.5 30.6667 42.5C31.7713 42.5 32.6667 43.3954 32.6667 44.5C32.6667 45.6046 31.7713 46.5 30.6667 46.5C29.5622 46.5 28.6667 45.6046 28.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 44.5C35.6667 43.3954 36.5622 42.5 37.6667 42.5C38.7713 42.5 39.6667 43.3954 39.6667 44.5C39.6667 45.6046 38.7713 46.5 37.6667 46.5C36.5622 46.5 35.6667 45.6046 35.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 44.5C42.6667 43.3954 43.5622 42.5 44.6667 42.5C45.7713 42.5 46.6667 43.3954 46.6667 44.5C46.6667 45.6046 45.7713 46.5 44.6667 46.5C43.5622 46.5 42.6667 45.6046 42.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 44.5C49.6667 43.3954 50.5622 42.5 51.6667 42.5C52.7713 42.5 53.6667 43.3954 53.6667 44.5C53.6667 45.6046 52.7713 46.5 51.6667 46.5C50.5622 46.5 49.6667 45.6046 49.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 44.5C56.6667 43.3954 57.5622 42.5 58.6667 42.5C59.7713 42.5 60.6667 43.3954 60.6667 44.5C60.6667 45.6046 59.7713 46.5 58.6667 46.5C57.5622 46.5 56.6667 45.6046 56.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 51.5C0.666748 50.3954 1.56218 49.5 2.66675 49.5C3.77132 49.5 4.66675 50.3954 4.66675 51.5C4.66675 52.6046 3.77132 53.5 2.66675 53.5C1.56218 53.5 0.666748 52.6046 0.666748 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 51.5C7.66675 50.3954 8.56218 49.5 9.66675 49.5C10.7713 49.5 11.6667 50.3954 11.6667 51.5C11.6667 52.6046 10.7713 53.5 9.66675 53.5C8.56218 53.5 7.66675 52.6046 7.66675 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 51.5C14.6667 50.3954 15.5622 49.5 16.6667 49.5C17.7713 49.5 18.6667 50.3954 18.6667 51.5C18.6667 52.6046 17.7713 53.5 16.6667 53.5C15.5622 53.5 14.6667 52.6046 14.6667 51.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 51.5C21.6667 50.3954 22.5622 49.5 23.6667 49.5C24.7713 49.5 25.6667 50.3954 25.6667 51.5C25.6667 52.6046 24.7713 53.5 23.6667 53.5C22.5622 53.5 21.6667 52.6046 21.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 51.5C28.6667 50.3954 29.5622 49.5 30.6667 49.5C31.7713 49.5 32.6667 50.3954 32.6667 51.5C32.6667 52.6046 31.7713 53.5 30.6667 53.5C29.5622 53.5 28.6667 52.6046 28.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 51.5C35.6667 50.3954 36.5622 49.5 37.6667 49.5C38.7713 49.5 39.6667 50.3954 39.6667 51.5C39.6667 52.6046 38.7713 53.5 37.6667 53.5C36.5622 53.5 35.6667 52.6046 35.6667 51.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 51.5C42.6667 50.3954 43.5622 49.5 44.6667 49.5C45.7713 49.5 46.6667 50.3954 46.6667 51.5C46.6667 52.6046 45.7713 53.5 44.6667 53.5C43.5622 53.5 42.6667 52.6046 42.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 51.5C49.6667 50.3954 50.5622 49.5 51.6667 49.5C52.7713 49.5 53.6667 50.3954 53.6667 51.5C53.6667 52.6046 52.7713 53.5 51.6667 53.5C50.5622 53.5 49.6667 52.6046 49.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 51.5C56.6667 50.3954 57.5622 49.5 58.6667 49.5C59.7713 49.5 60.6667 50.3954 60.6667 51.5C60.6667 52.6046 59.7713 53.5 58.6667 53.5C57.5622 53.5 56.6667 52.6046 56.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 58.5C0.666748 57.3954 1.56218 56.5 2.66675 56.5C3.77132 56.5 4.66675 57.3954 4.66675 58.5C4.66675 59.6046 3.77132 60.5 2.66675 60.5C1.56218 60.5 0.666748 59.6046 0.666748 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 58.5C7.66675 57.3954 8.56218 56.5 9.66675 56.5C10.7713 56.5 11.6667 57.3954 11.6667 58.5C11.6667 59.6046 10.7713 60.5 9.66675 60.5C8.56218 60.5 7.66675 59.6046 7.66675 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 58.5C14.6667 57.3954 15.5622 56.5 16.6667 56.5C17.7713 56.5 18.6667 57.3954 18.6667 58.5C18.6667 59.6046 17.7713 60.5 16.6667 60.5C15.5622 60.5 14.6667 59.6046 14.6667 58.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 58.5C21.6667 57.3954 22.5622 56.5 23.6667 56.5C24.7713 56.5 25.6667 57.3954 25.6667 58.5C25.6667 59.6046 24.7713 60.5 23.6667 60.5C22.5622 60.5 21.6667 59.6046 21.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 58.5C28.6667 57.3954 29.5622 56.5 30.6667 56.5C31.7713 56.5 32.6667 57.3954 32.6667 58.5C32.6667 59.6046 31.7713 60.5 30.6667 60.5C29.5622 60.5 28.6667 59.6046 28.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 58.5C35.6667 57.3954 36.5622 56.5 37.6667 56.5C38.7713 56.5 39.6667 57.3954 39.6667 58.5C39.6667 59.6046 38.7713 60.5 37.6667 60.5C36.5622 60.5 35.6667 59.6046 35.6667 58.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 58.5C42.6667 57.3954 43.5622 56.5 44.6667 56.5C45.7713 56.5 46.6667 57.3954 46.6667 58.5C46.6667 59.6046 45.7713 60.5 44.6667 60.5C43.5622 60.5 42.6667 59.6046 42.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 58.5C49.6667 57.3954 50.5622 56.5 51.6667 56.5C52.7713 56.5 53.6667 57.3954 53.6667 58.5C53.6667 59.6046 52.7713 60.5 51.6667 60.5C50.5622 60.5 49.6667 59.6046 49.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 58.5C56.6667 57.3954 57.5622 56.5 58.6667 56.5C59.7713 56.5 60.6667 57.3954 60.6667 58.5C60.6667 59.6046 59.7713 60.5 58.6667 60.5C57.5622 60.5 56.6667 59.6046 56.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5240'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.666748 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Premium
|
||||
@@ -0,0 +1,96 @@
|
||||
const Professional = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4802)'>
|
||||
<rect opacity='0.18' x='0.666626' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7.66663' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='28.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='35.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='42.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='14.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='21.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='49.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='14.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='14.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='0.666626' y='21.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='7.66663' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='0.666626' y='28.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='7.66663' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='0.666626' y='35.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='7.66663' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='0.666626' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='42.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='14.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='14.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='21.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='49.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7.66663' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='28.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='35.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='42.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4802'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.666626 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Professional
|
||||
96
dify/web/app/components/billing/pricing/assets/sandbox.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/sandbox.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Sandbox = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='61' viewBox='0 0 60 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_65915)'>
|
||||
<rect opacity='0.18' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 2.5C14 1.39543 14.8954 0.5 16 0.5C17.1046 0.5 18 1.39543 18 2.5C18 3.60457 17.1046 4.5 16 4.5C14.8954 4.5 14 3.60457 14 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 2.5C21 1.39543 21.8954 0.5 23 0.5C24.1046 0.5 25 1.39543 25 2.5C25 3.60457 24.1046 4.5 23 4.5C21.8954 4.5 21 3.60457 21 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 2.5C28 1.39543 28.8954 0.5 30 0.5C31.1046 0.5 32 1.39543 32 2.5C32 3.60457 31.1046 4.5 30 4.5C28.8954 4.5 28 3.60457 28 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 2.5C35 1.39543 35.8954 0.5 37 0.5C38.1046 0.5 39 1.39543 39 2.5C39 3.60457 38.1046 4.5 37 4.5C35.8954 4.5 35 3.60457 35 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 2.5C42 1.39543 42.8954 0.5 44 0.5C45.1046 0.5 46 1.39543 46 2.5C46 3.60457 45.1046 4.5 44 4.5C42.8954 4.5 42 3.60457 42 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 2.5C49 1.39543 49.8954 0.5 51 0.5C52.1046 0.5 53 1.39543 53 2.5C53 3.60457 52.1046 4.5 51 4.5C49.8954 4.5 49 3.60457 49 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 2.5C56 1.39543 56.8954 0.5 58 0.5C59.1046 0.5 60 1.39543 60 2.5C60 3.60457 59.1046 4.5 58 4.5C56.8954 4.5 56 3.60457 56 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 9.5C7 8.39543 7.89543 7.5 9 7.5C10.1046 7.5 11 8.39543 11 9.5C11 10.6046 10.1046 11.5 9 11.5C7.89543 11.5 7 10.6046 7 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 9.5C49 8.39543 49.8954 7.5 51 7.5C52.1046 7.5 53 8.39543 53 9.5C53 10.6046 52.1046 11.5 51 11.5C49.8954 11.5 49 10.6046 49 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 9.5C56 8.39543 56.8954 7.5 58 7.5C59.1046 7.5 60 8.39543 60 9.5C60 10.6046 59.1046 11.5 58 11.5C56.8954 11.5 56 10.6046 56 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 16.5C0 15.3954 0.895431 14.5 2 14.5C3.10457 14.5 4 15.3954 4 16.5C4 17.6046 3.10457 18.5 2 18.5C0.895431 18.5 0 17.6046 0 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 16.5C7 15.3954 7.89543 14.5 9 14.5C10.1046 14.5 11 15.3954 11 16.5C11 17.6046 10.1046 18.5 9 18.5C7.89543 18.5 7 17.6046 7 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 16.5C14 15.3954 14.8954 14.5 16 14.5C17.1046 14.5 18 15.3954 18 16.5C18 17.6046 17.1046 18.5 16 18.5C14.8954 18.5 14 17.6046 14 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 16.5C21 15.3954 21.8954 14.5 23 14.5C24.1046 14.5 25 15.3954 25 16.5C25 17.6046 24.1046 18.5 23 18.5C21.8954 18.5 21 17.6046 21 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 16.5C28 15.3954 28.8954 14.5 30 14.5C31.1046 14.5 32 15.3954 32 16.5C32 17.6046 31.1046 18.5 30 18.5C28.8954 18.5 28 17.6046 28 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 16.5C35 15.3954 35.8954 14.5 37 14.5C38.1046 14.5 39 15.3954 39 16.5C39 17.6046 38.1046 18.5 37 18.5C35.8954 18.5 35 17.6046 35 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 16.5C42 15.3954 42.8954 14.5 44 14.5C45.1046 14.5 46 15.3954 46 16.5C46 17.6046 45.1046 18.5 44 18.5C42.8954 18.5 42 17.6046 42 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 16.5C56 15.3954 56.8954 14.5 58 14.5C59.1046 14.5 60 15.3954 60 16.5C60 17.6046 59.1046 18.5 58 18.5C56.8954 18.5 56 17.6046 56 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 23.5C0 22.3954 0.895431 21.5 2 21.5C3.10457 21.5 4 22.3954 4 23.5C4 24.6046 3.10457 25.5 2 25.5C0.895431 25.5 0 24.6046 0 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 23.5C42 22.3954 42.8954 21.5 44 21.5C45.1046 21.5 46 22.3954 46 23.5C46 24.6046 45.1046 25.5 44 25.5C42.8954 25.5 42 24.6046 42 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 23.5C56 22.3954 56.8954 21.5 58 21.5C59.1046 21.5 60 22.3954 60 23.5C60 24.6046 59.1046 25.5 58 25.5C56.8954 25.5 56 24.6046 56 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 30.5C0 29.3954 0.895431 28.5 2 28.5C3.10457 28.5 4 29.3954 4 30.5C4 31.6046 3.10457 32.5 2 32.5C0.895431 32.5 0 31.6046 0 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 30.5C42 29.3954 42.8954 28.5 44 28.5C45.1046 28.5 46 29.3954 46 30.5C46 31.6046 45.1046 32.5 44 32.5C42.8954 32.5 42 31.6046 42 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 30.5C56 29.3954 56.8954 28.5 58 28.5C59.1046 28.5 60 29.3954 60 30.5C60 31.6046 59.1046 32.5 58 32.5C56.8954 32.5 56 31.6046 56 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 37.5C0 36.3954 0.895431 35.5 2 35.5C3.10457 35.5 4 36.3954 4 37.5C4 38.6046 3.10457 39.5 2 39.5C0.895431 39.5 0 38.6046 0 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 37.5C42 36.3954 42.8954 35.5 44 35.5C45.1046 35.5 46 36.3954 46 37.5C46 38.6046 45.1046 39.5 44 39.5C42.8954 39.5 42 38.6046 42 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 37.5C56 36.3954 56.8954 35.5 58 35.5C59.1046 35.5 60 36.3954 60 37.5C60 38.6046 59.1046 39.5 58 39.5C56.8954 39.5 56 38.6046 56 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 44.5C0 43.3954 0.895431 42.5 2 42.5C3.10457 42.5 4 43.3954 4 44.5C4 45.6046 3.10457 46.5 2 46.5C0.895431 46.5 0 45.6046 0 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 44.5C42 43.3954 42.8954 42.5 44 42.5C45.1046 42.5 46 43.3954 46 44.5C46 45.6046 45.1046 46.5 44 46.5C42.8954 46.5 42 45.6046 42 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 44.5C56 43.3954 56.8954 42.5 58 42.5C59.1046 42.5 60 43.3954 60 44.5C60 45.6046 59.1046 46.5 58 46.5C56.8954 46.5 56 45.6046 56 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 51.5C0 50.3954 0.895431 49.5 2 49.5C3.10457 49.5 4 50.3954 4 51.5C4 52.6046 3.10457 53.5 2 53.5C0.895431 53.5 0 52.6046 0 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 51.5C42 50.3954 42.8954 49.5 44 49.5C45.1046 49.5 46 50.3954 46 51.5C46 52.6046 45.1046 53.5 44 53.5C42.8954 53.5 42 52.6046 42 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 51.5C49 50.3954 49.8954 49.5 51 49.5C52.1046 49.5 53 50.3954 53 51.5C53 52.6046 52.1046 53.5 51 53.5C49.8954 53.5 49 52.6046 49 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 58.5C0 57.3954 0.895431 56.5 2 56.5C3.10457 56.5 4 57.3954 4 58.5C4 59.6046 3.10457 60.5 2 60.5C0.895431 60.5 0 59.6046 0 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 58.5C7 57.3954 7.89543 56.5 9 56.5C10.1046 56.5 11 57.3954 11 58.5C11 59.6046 10.1046 60.5 9 60.5C7.89543 60.5 7 59.6046 7 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 58.5C14 57.3954 14.8954 56.5 16 56.5C17.1046 56.5 18 57.3954 18 58.5C18 59.6046 17.1046 60.5 16 60.5C14.8954 60.5 14 59.6046 14 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 58.5C21 57.3954 21.8954 56.5 23 56.5C24.1046 56.5 25 57.3954 25 58.5C25 59.6046 24.1046 60.5 23 60.5C21.8954 60.5 21 59.6046 21 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 58.5C28 57.3954 28.8954 56.5 30 56.5C31.1046 56.5 32 57.3954 32 58.5C32 59.6046 31.1046 60.5 30 60.5C28.8954 60.5 28 59.6046 28 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 58.5C35 57.3954 35.8954 56.5 37 56.5C38.1046 56.5 39 57.3954 39 58.5C39 59.6046 38.1046 60.5 37 60.5C35.8954 60.5 35 59.6046 35 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 58.5C42 57.3954 42.8954 56.5 44 56.5C45.1046 56.5 46 57.3954 46 58.5C46 59.6046 45.1046 60.5 44 60.5C42.8954 60.5 42 59.6046 42 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_65915'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sandbox
|
||||
@@ -0,0 +1,32 @@
|
||||
type SelfHostedProps = {
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
const SelfHosted = ({
|
||||
isActive,
|
||||
}: SelfHostedProps) => {
|
||||
const color = isActive ? 'var(--color-saas-dify-blue-accessible)' : 'var(--color-text-primary)'
|
||||
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4644)'>
|
||||
<rect opacity='0.18' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='6' y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='12' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect y='6.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='6.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' y='12.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='6' y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='12' y='12.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4644'>
|
||||
<rect width='16' height='16' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelfHosted
|
||||
96
dify/web/app/components/billing/pricing/assets/team.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/team.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Team = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4943)'>
|
||||
<rect x='0.333374' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='7.33337' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='14.3334' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M21.3334 2.5C21.3334 1.39543 22.2288 0.5 23.3334 0.5C24.4379 0.5 25.3334 1.39543 25.3334 2.5C25.3334 3.60457 24.4379 4.5 23.3334 4.5C22.2288 4.5 21.3334 3.60457 21.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 2.5C28.3334 1.39543 29.2288 0.5 30.3334 0.5C31.4379 0.5 32.3334 1.39543 32.3334 2.5C32.3334 3.60457 31.4379 4.5 30.3334 4.5C29.2288 4.5 28.3334 3.60457 28.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 2.5C42.3334 1.39543 43.2288 0.5 44.3334 0.5C45.4379 0.5 46.3334 1.39543 46.3334 2.5C46.3334 3.60457 45.4379 4.5 44.3334 4.5C43.2288 4.5 42.3334 3.60457 42.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 2.5C49.3334 1.39543 50.2288 0.5 51.3334 0.5C52.4379 0.5 53.3334 1.39543 53.3334 2.5C53.3334 3.60457 52.4379 4.5 51.3334 4.5C50.2288 4.5 49.3334 3.60457 49.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.3334 2.5C56.3334 1.39543 57.2288 0.5 58.3334 0.5C59.4379 0.5 60.3334 1.39543 60.3334 2.5C60.3334 3.60457 59.4379 4.5 58.3334 4.5C57.2288 4.5 56.3334 3.60457 56.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 9.5C0.333374 8.39543 1.2288 7.5 2.33337 7.5C3.43794 7.5 4.33337 8.39543 4.33337 9.5C4.33337 10.6046 3.43794 11.5 2.33337 11.5C1.2288 11.5 0.333374 10.6046 0.333374 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 9.5C7.33337 8.39543 8.2288 7.5 9.33337 7.5C10.4379 7.5 11.3334 8.39543 11.3334 9.5C11.3334 10.6046 10.4379 11.5 9.33337 11.5C8.2288 11.5 7.33337 10.6046 7.33337 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 9.5C14.3334 8.39543 15.2288 7.5 16.3334 7.5C17.4379 7.5 18.3334 8.39543 18.3334 9.5C18.3334 10.6046 17.4379 11.5 16.3334 11.5C15.2288 11.5 14.3334 10.6046 14.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='28.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 9.5C35.3334 8.39543 36.2288 7.5 37.3334 7.5C38.4379 7.5 39.3334 8.39543 39.3334 9.5C39.3334 10.6046 38.4379 11.5 37.3334 11.5C36.2288 11.5 35.3334 10.6046 35.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='49.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 9.5C56.3334 8.39543 57.2288 7.5 58.3334 7.5C59.4379 7.5 60.3334 8.39543 60.3334 9.5C60.3334 10.6046 59.4379 11.5 58.3334 11.5C57.2288 11.5 56.3334 10.6046 56.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 16.5C0.333374 15.3954 1.2288 14.5 2.33337 14.5C3.43794 14.5 4.33337 15.3954 4.33337 16.5C4.33337 17.6046 3.43794 18.5 2.33337 18.5C1.2288 18.5 0.333374 17.6046 0.333374 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 16.5C7.33337 15.3954 8.2288 14.5 9.33337 14.5C10.4379 14.5 11.3334 15.3954 11.3334 16.5C11.3334 17.6046 10.4379 18.5 9.33337 18.5C8.2288 18.5 7.33337 17.6046 7.33337 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 16.5C14.3334 15.3954 15.2288 14.5 16.3334 14.5C17.4379 14.5 18.3334 15.3954 18.3334 16.5C18.3334 17.6046 17.4379 18.5 16.3334 18.5C15.2288 18.5 14.3334 17.6046 14.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 16.5C21.3334 15.3954 22.2288 14.5 23.3334 14.5C24.4379 14.5 25.3334 15.3954 25.3334 16.5C25.3334 17.6046 24.4379 18.5 23.3334 18.5C22.2288 18.5 21.3334 17.6046 21.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='28.3334' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 16.5C35.3334 15.3954 36.2288 14.5 37.3334 14.5C38.4379 14.5 39.3334 15.3954 39.3334 16.5C39.3334 17.6046 38.4379 18.5 37.3334 18.5C36.2288 18.5 35.3334 17.6046 35.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3334 16.5C42.3334 15.3954 43.2288 14.5 44.3334 14.5C45.4379 14.5 46.3334 15.3954 46.3334 16.5C46.3334 17.6046 45.4379 18.5 44.3334 18.5C43.2288 18.5 42.3334 17.6046 42.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.3334' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 16.5C56.3334 15.3954 57.2288 14.5 58.3334 14.5C59.4379 14.5 60.3334 15.3954 60.3334 16.5C60.3334 17.6046 59.4379 18.5 58.3334 18.5C57.2288 18.5 56.3334 17.6046 56.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 23.5C0.333374 22.3954 1.2288 21.5 2.33337 21.5C3.43794 21.5 4.33337 22.3954 4.33337 23.5C4.33337 24.6046 3.43794 25.5 2.33337 25.5C1.2288 25.5 0.333374 24.6046 0.333374 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 23.5C7.33337 22.3954 8.2288 21.5 9.33337 21.5C10.4379 21.5 11.3334 22.3954 11.3334 23.5C11.3334 24.6046 10.4379 25.5 9.33337 25.5C8.2288 25.5 7.33337 24.6046 7.33337 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 23.5C14.3334 22.3954 15.2288 21.5 16.3334 21.5C17.4379 21.5 18.3334 22.3954 18.3334 23.5C18.3334 24.6046 17.4379 25.5 16.3334 25.5C15.2288 25.5 14.3334 24.6046 14.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 23.5C21.3334 22.3954 22.2288 21.5 23.3334 21.5C24.4379 21.5 25.3334 22.3954 25.3334 23.5C25.3334 24.6046 24.4379 25.5 23.3334 25.5C22.2288 25.5 21.3334 24.6046 21.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 23.5C28.3334 22.3954 29.2288 21.5 30.3334 21.5C31.4379 21.5 32.3334 22.3954 32.3334 23.5C32.3334 24.6046 31.4379 25.5 30.3334 25.5C29.2288 25.5 28.3334 24.6046 28.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 23.5C42.3334 22.3954 43.2288 21.5 44.3334 21.5C45.4379 21.5 46.3334 22.3954 46.3334 23.5C46.3334 24.6046 45.4379 25.5 44.3334 25.5C43.2288 25.5 42.3334 24.6046 42.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 23.5C49.3334 22.3954 50.2288 21.5 51.3334 21.5C52.4379 21.5 53.3334 22.3954 53.3334 23.5C53.3334 24.6046 52.4379 25.5 51.3334 25.5C50.2288 25.5 49.3334 24.6046 49.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 30.5C0.333374 29.3954 1.2288 28.5 2.33337 28.5C3.43794 28.5 4.33337 29.3954 4.33337 30.5C4.33337 31.6046 3.43794 32.5 2.33337 32.5C1.2288 32.5 0.333374 31.6046 0.333374 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 30.5C7.33337 29.3954 8.2288 28.5 9.33337 28.5C10.4379 28.5 11.3334 29.3954 11.3334 30.5C11.3334 31.6046 10.4379 32.5 9.33337 32.5C8.2288 32.5 7.33337 31.6046 7.33337 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 30.5C14.3334 29.3954 15.2288 28.5 16.3334 28.5C17.4379 28.5 18.3334 29.3954 18.3334 30.5C18.3334 31.6046 17.4379 32.5 16.3334 32.5C15.2288 32.5 14.3334 31.6046 14.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 30.5C21.3334 29.3954 22.2288 28.5 23.3334 28.5C24.4379 28.5 25.3334 29.3954 25.3334 30.5C25.3334 31.6046 24.4379 32.5 23.3334 32.5C22.2288 32.5 21.3334 31.6046 21.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 30.5C28.3334 29.3954 29.2288 28.5 30.3334 28.5C31.4379 28.5 32.3334 29.3954 32.3334 30.5C32.3334 31.6046 31.4379 32.5 30.3334 32.5C29.2288 32.5 28.3334 31.6046 28.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 30.5C42.3334 29.3954 43.2288 28.5 44.3334 28.5C45.4379 28.5 46.3334 29.3954 46.3334 30.5C46.3334 31.6046 45.4379 32.5 44.3334 32.5C43.2288 32.5 42.3334 31.6046 42.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 30.5C49.3334 29.3954 50.2288 28.5 51.3334 28.5C52.4379 28.5 53.3334 29.3954 53.3334 30.5C53.3334 31.6046 52.4379 32.5 51.3334 32.5C50.2288 32.5 49.3334 31.6046 49.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 37.5C0.333374 36.3954 1.2288 35.5 2.33337 35.5C3.43794 35.5 4.33337 36.3954 4.33337 37.5C4.33337 38.6046 3.43794 39.5 2.33337 39.5C1.2288 39.5 0.333374 38.6046 0.333374 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 37.5C7.33337 36.3954 8.2288 35.5 9.33337 35.5C10.4379 35.5 11.3334 36.3954 11.3334 37.5C11.3334 38.6046 10.4379 39.5 9.33337 39.5C8.2288 39.5 7.33337 38.6046 7.33337 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 37.5C14.3334 36.3954 15.2288 35.5 16.3334 35.5C17.4379 35.5 18.3334 36.3954 18.3334 37.5C18.3334 38.6046 17.4379 39.5 16.3334 39.5C15.2288 39.5 14.3334 38.6046 14.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 37.5C21.3334 36.3954 22.2288 35.5 23.3334 35.5C24.4379 35.5 25.3334 36.3954 25.3334 37.5C25.3334 38.6046 24.4379 39.5 23.3334 39.5C22.2288 39.5 21.3334 38.6046 21.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 37.5C28.3334 36.3954 29.2288 35.5 30.3334 35.5C31.4379 35.5 32.3334 36.3954 32.3334 37.5C32.3334 38.6046 31.4379 39.5 30.3334 39.5C29.2288 39.5 28.3334 38.6046 28.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 37.5C42.3334 36.3954 43.2288 35.5 44.3334 35.5C45.4379 35.5 46.3334 36.3954 46.3334 37.5C46.3334 38.6046 45.4379 39.5 44.3334 39.5C43.2288 39.5 42.3334 38.6046 42.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 37.5C49.3334 36.3954 50.2288 35.5 51.3334 35.5C52.4379 35.5 53.3334 36.3954 53.3334 37.5C53.3334 38.6046 52.4379 39.5 51.3334 39.5C50.2288 39.5 49.3334 38.6046 49.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 44.5C0.333374 43.3954 1.2288 42.5 2.33337 42.5C3.43794 42.5 4.33337 43.3954 4.33337 44.5C4.33337 45.6046 3.43794 46.5 2.33337 46.5C1.2288 46.5 0.333374 45.6046 0.333374 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 44.5C7.33337 43.3954 8.2288 42.5 9.33337 42.5C10.4379 42.5 11.3334 43.3954 11.3334 44.5C11.3334 45.6046 10.4379 46.5 9.33337 46.5C8.2288 46.5 7.33337 45.6046 7.33337 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 44.5C14.3334 43.3954 15.2288 42.5 16.3334 42.5C17.4379 42.5 18.3334 43.3954 18.3334 44.5C18.3334 45.6046 17.4379 46.5 16.3334 46.5C15.2288 46.5 14.3334 45.6046 14.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 44.5C21.3334 43.3954 22.2288 42.5 23.3334 42.5C24.4379 42.5 25.3334 43.3954 25.3334 44.5C25.3334 45.6046 24.4379 46.5 23.3334 46.5C22.2288 46.5 21.3334 45.6046 21.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='28.3334' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 44.5C35.3334 43.3954 36.2288 42.5 37.3334 42.5C38.4379 42.5 39.3334 43.3954 39.3334 44.5C39.3334 45.6046 38.4379 46.5 37.3334 46.5C36.2288 46.5 35.3334 45.6046 35.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3334 44.5C42.3334 43.3954 43.2288 42.5 44.3334 42.5C45.4379 42.5 46.3334 43.3954 46.3334 44.5C46.3334 45.6046 45.4379 46.5 44.3334 46.5C43.2288 46.5 42.3334 45.6046 42.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.3334' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 44.5C56.3334 43.3954 57.2288 42.5 58.3334 42.5C59.4379 42.5 60.3334 43.3954 60.3334 44.5C60.3334 45.6046 59.4379 46.5 58.3334 46.5C57.2288 46.5 56.3334 45.6046 56.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 51.5C0.333374 50.3954 1.2288 49.5 2.33337 49.5C3.43794 49.5 4.33337 50.3954 4.33337 51.5C4.33337 52.6046 3.43794 53.5 2.33337 53.5C1.2288 53.5 0.333374 52.6046 0.333374 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 51.5C7.33337 50.3954 8.2288 49.5 9.33337 49.5C10.4379 49.5 11.3334 50.3954 11.3334 51.5C11.3334 52.6046 10.4379 53.5 9.33337 53.5C8.2288 53.5 7.33337 52.6046 7.33337 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 51.5C14.3334 50.3954 15.2288 49.5 16.3334 49.5C17.4379 49.5 18.3334 50.3954 18.3334 51.5C18.3334 52.6046 17.4379 53.5 16.3334 53.5C15.2288 53.5 14.3334 52.6046 14.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='28.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 51.5C35.3334 50.3954 36.2288 49.5 37.3334 49.5C38.4379 49.5 39.3334 50.3954 39.3334 51.5C39.3334 52.6046 38.4379 53.5 37.3334 53.5C36.2288 53.5 35.3334 52.6046 35.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='49.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 51.5C56.3334 50.3954 57.2288 49.5 58.3334 49.5C59.4379 49.5 60.3334 50.3954 60.3334 51.5C60.3334 52.6046 59.4379 53.5 58.3334 53.5C57.2288 53.5 56.3334 52.6046 56.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='0.333374' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='7.33337' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='14.3334' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M21.3334 58.5C21.3334 57.3954 22.2288 56.5 23.3334 56.5C24.4379 56.5 25.3334 57.3954 25.3334 58.5C25.3334 59.6046 24.4379 60.5 23.3334 60.5C22.2288 60.5 21.3334 59.6046 21.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 58.5C28.3334 57.3954 29.2288 56.5 30.3334 56.5C31.4379 56.5 32.3334 57.3954 32.3334 58.5C32.3334 59.6046 31.4379 60.5 30.3334 60.5C29.2288 60.5 28.3334 59.6046 28.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 58.5C42.3334 57.3954 43.2288 56.5 44.3334 56.5C45.4379 56.5 46.3334 57.3954 46.3334 58.5C46.3334 59.6046 45.4379 60.5 44.3334 60.5C43.2288 60.5 42.3334 59.6046 42.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 58.5C49.3334 57.3954 50.2288 56.5 51.3334 56.5C52.4379 56.5 53.3334 57.3954 53.3334 58.5C53.3334 59.6046 52.4379 60.5 51.3334 60.5C50.2288 60.5 49.3334 59.6046 49.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.3334 58.5C56.3334 57.3954 57.2288 56.5 58.3334 56.5C59.4379 56.5 60.3334 57.3954 60.3334 58.5C60.3334 59.6046 59.4379 60.5 58.3334 60.5C57.2288 60.5 56.3334 59.6046 56.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4943'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.333374 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
43
dify/web/app/components/billing/pricing/footer.tsx
Normal file
43
dify/web/app/components/billing/pricing/footer.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowRightUpLine } from '@remixicon/react'
|
||||
import { type Category, CategoryEnum } from '.'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type FooterProps = {
|
||||
pricingPageURL: string
|
||||
currentCategory: Category
|
||||
}
|
||||
|
||||
const Footer = ({
|
||||
pricingPageURL,
|
||||
currentCategory,
|
||||
}: FooterProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex min-h-16 w-full justify-center border-t border-divider-accent px-10'>
|
||||
<div className={cn('flex max-w-[1680px] grow border-x border-divider-accent p-6', currentCategory === CategoryEnum.CLOUD ? 'justify-between' : 'justify-end') }>
|
||||
{currentCategory === CategoryEnum.CLOUD && (
|
||||
<div className='flex flex-col text-text-tertiary'>
|
||||
<span className='system-xs-regular'>{t('billing.plansCommon.taxTip')}</span>
|
||||
<span className='system-xs-regular'>{t('billing.plansCommon.taxTipSecond')}</span>
|
||||
</div>
|
||||
)}
|
||||
<span className='flex h-fit items-center gap-x-1 text-saas-dify-blue-accessible'>
|
||||
<Link
|
||||
href={pricingPageURL}
|
||||
className='system-md-regular'
|
||||
target='_blank'
|
||||
>
|
||||
{t('billing.plansCommon.comparePlanAndFeatures')}
|
||||
</Link>
|
||||
<RiArrowRightUpLine className='size-4' />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Footer)
|
||||
42
dify/web/app/components/billing/pricing/header.tsx
Normal file
42
dify/web/app/components/billing/pricing/header.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react'
|
||||
import DifyLogo from '../../base/logo/dify-logo'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../base/button'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
|
||||
type HeaderProps = {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const Header = ({
|
||||
onClose,
|
||||
}: HeaderProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex min-h-[105px] w-full justify-center px-10'>
|
||||
<div className='relative flex max-w-[1680px] grow flex-col justify-end gap-y-1 border-x border-divider-accent p-6 pt-8'>
|
||||
<div className='flex items-end'>
|
||||
<div className='py-[5px]'>
|
||||
<DifyLogo className='h-[27px] w-[60px]' />
|
||||
</div>
|
||||
<span className='bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent'>
|
||||
{t('billing.plansCommon.title.plans')}
|
||||
</span>
|
||||
</div>
|
||||
<p className='system-sm-regular text-text-tertiary'>
|
||||
{t('billing.plansCommon.title.description')}
|
||||
</p>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2'
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='size-5' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Header)
|
||||
73
dify/web/app/components/billing/pricing/index.tsx
Normal file
73
dify/web/app/components/billing/pricing/index.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import Header from './header'
|
||||
import PlanSwitcher from './plan-switcher'
|
||||
import Plans from './plans'
|
||||
import Footer from './footer'
|
||||
import { PlanRange } from './plan-switcher/plan-range-switcher'
|
||||
import { useKeyPress } from 'ahooks'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { useGetPricingPageLanguage } from '@/context/i18n'
|
||||
import { NoiseBottom, NoiseTop } from './assets'
|
||||
|
||||
export enum CategoryEnum {
|
||||
CLOUD = 'cloud',
|
||||
SELF = 'self',
|
||||
}
|
||||
|
||||
export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF
|
||||
|
||||
type PricingProps = {
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
const Pricing: FC<PricingProps> = ({
|
||||
onCancel,
|
||||
}) => {
|
||||
const { plan } = useProviderContext()
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
|
||||
const [currentCategory, setCurrentCategory] = useState<Category>(CategoryEnum.CLOUD)
|
||||
const canPay = isCurrentWorkspaceManager
|
||||
useKeyPress(['esc'], onCancel)
|
||||
|
||||
const pricingPageLanguage = useGetPricingPageLanguage()
|
||||
const pricingPageURL = pricingPageLanguage
|
||||
? `https://dify.ai/${pricingPageLanguage}/pricing#plans-and-features`
|
||||
: 'https://dify.ai/pricing#plans-and-features'
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background'
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden'>
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<NoiseTop />
|
||||
</div>
|
||||
<Header onClose={onCancel} />
|
||||
<PlanSwitcher
|
||||
currentCategory={currentCategory}
|
||||
onChangeCategory={setCurrentCategory}
|
||||
currentPlanRange={planRange}
|
||||
onChangePlanRange={setPlanRange}
|
||||
/>
|
||||
<Plans
|
||||
plan={plan}
|
||||
currentPlan={currentCategory}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory}/>
|
||||
<div className='absolute -bottom-12 left-0 right-0 -z-10'>
|
||||
<NoiseBottom />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
export default React.memo(Pricing)
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { Category } from '../index'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Cloud, SelfHosted } from '../assets'
|
||||
import Tab from './tab'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import type { PlanRange } from './plan-range-switcher'
|
||||
import PlanRangeSwitcher from './plan-range-switcher'
|
||||
|
||||
type PlanSwitcherProps = {
|
||||
currentCategory: Category
|
||||
currentPlanRange: PlanRange
|
||||
onChangeCategory: (category: Category) => void
|
||||
onChangePlanRange: (value: PlanRange) => void
|
||||
}
|
||||
|
||||
const PlanSwitcher: FC<PlanSwitcherProps> = ({
|
||||
currentCategory,
|
||||
currentPlanRange,
|
||||
onChangeCategory,
|
||||
onChangePlanRange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const isCloud = currentCategory === 'cloud'
|
||||
|
||||
const tabs = {
|
||||
cloud: {
|
||||
value: 'cloud' as Category,
|
||||
label: t('billing.plansCommon.cloud'),
|
||||
Icon: Cloud,
|
||||
},
|
||||
self: {
|
||||
value: 'self' as Category,
|
||||
label: t('billing.plansCommon.self'),
|
||||
Icon: SelfHosted,
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex w-full justify-center border-t border-divider-accent px-10'>
|
||||
<div className='flex max-w-[1680px] grow items-center justify-between border-x border-divider-accent p-1'>
|
||||
<div className='flex items-center'>
|
||||
<Tab<Category>
|
||||
{...tabs.cloud}
|
||||
isActive={currentCategory === tabs.cloud.value}
|
||||
onClick={onChangeCategory}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-2 h-4 bg-divider-accent' />
|
||||
<Tab<Category>
|
||||
{...tabs.self}
|
||||
isActive={currentCategory === tabs.self.value}
|
||||
onClick={onChangeCategory}
|
||||
/>
|
||||
</div>
|
||||
{isCloud && (
|
||||
<PlanRangeSwitcher
|
||||
value={currentPlanRange}
|
||||
onChange={onChangePlanRange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(PlanSwitcher)
|
||||
@@ -0,0 +1,38 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Switch from '../../../base/switch'
|
||||
|
||||
export enum PlanRange {
|
||||
monthly = 'monthly',
|
||||
yearly = 'yearly',
|
||||
}
|
||||
|
||||
type PlanRangeSwitcherProps = {
|
||||
value: PlanRange
|
||||
onChange: (value: PlanRange) => void
|
||||
}
|
||||
|
||||
const PlanRangeSwitcher: FC<PlanRangeSwitcherProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex items-center justify-end gap-x-3 pr-5'>
|
||||
<Switch
|
||||
size='l'
|
||||
defaultValue={value === PlanRange.yearly}
|
||||
onChange={(v) => {
|
||||
onChange(v ? PlanRange.yearly : PlanRange.monthly)
|
||||
}}
|
||||
/>
|
||||
<span className='system-md-regular text-text-tertiary'>
|
||||
{t('billing.plansCommon.annualBilling', { percent: 17 })}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(PlanRangeSwitcher)
|
||||
@@ -0,0 +1,41 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type TabProps<T> = {
|
||||
Icon: React.ComponentType<{ isActive: boolean }>
|
||||
value: T
|
||||
label: string
|
||||
isActive: boolean
|
||||
onClick: (value: T) => void
|
||||
}
|
||||
|
||||
const Tab = <T,>({
|
||||
Icon,
|
||||
value,
|
||||
label,
|
||||
isActive,
|
||||
onClick,
|
||||
}: TabProps<T>) => {
|
||||
const handleClick = useCallback(() => {
|
||||
onClick(value)
|
||||
}, [onClick, value])
|
||||
|
||||
return (
|
||||
<div
|
||||
className='flex cursor-pointer items-center justify-center gap-x-2 px-5 py-3'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Icon isActive={isActive} />
|
||||
<span
|
||||
className={cn(
|
||||
'system-xl-semibold text-text-secondary',
|
||||
isActive && 'text-saas-dify-blue-accessible',
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Tab) as typeof Tab
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react'
|
||||
import type { BasicPlan } from '../../../type'
|
||||
import { Plan } from '../../../type'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
|
||||
const BUTTON_CLASSNAME = {
|
||||
[Plan.sandbox]: {
|
||||
btnClassname: 'bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover text-text-primary',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.professional]: {
|
||||
btnClassname: 'bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover text-text-primary-on-surface',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.team]: {
|
||||
btnClassname: 'bg-saas-background-inverted hover:bg-saas-background-inverted-hover text-background-default',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
plan: BasicPlan
|
||||
isPlanDisabled: boolean
|
||||
btnText: string
|
||||
handleGetPayUrl: () => void
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
plan,
|
||||
isPlanDisabled,
|
||||
btnText,
|
||||
handleGetPayUrl,
|
||||
}: ButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
type='button'
|
||||
disabled={isPlanDisabled}
|
||||
className={cn(
|
||||
'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
|
||||
BUTTON_CLASSNAME[plan].btnClassname,
|
||||
isPlanDisabled && BUTTON_CLASSNAME[plan].btnDisabledClassname,
|
||||
isPlanDisabled && 'cursor-not-allowed',
|
||||
)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
<span className='grow text-start'>{btnText}</span>
|
||||
{!isPlanDisabled && <RiArrowRightLine className='size-5 shrink-0' />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Button)
|
||||
@@ -0,0 +1,133 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { BasicPlan } from '../../../type'
|
||||
import { Plan } from '../../../type'
|
||||
import { ALL_PLANS } from '../../../config'
|
||||
import Toast from '../../../../base/toast'
|
||||
import { PlanRange } from '../../plan-switcher/plan-range-switcher'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { fetchSubscriptionUrls } from '@/service/billing'
|
||||
import List from './list'
|
||||
import Button from './button'
|
||||
import { Professional, Sandbox, Team } from '../../assets'
|
||||
|
||||
const ICON_MAP = {
|
||||
[Plan.sandbox]: <Sandbox />,
|
||||
[Plan.professional]: <Professional />,
|
||||
[Plan.team]: <Team />,
|
||||
}
|
||||
|
||||
type CloudPlanItemProps = {
|
||||
currentPlan: BasicPlan
|
||||
plan: BasicPlan
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const CloudPlanItem: FC<CloudPlanItemProps> = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const isMostPopularPlan = plan === Plan.professional
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
const isYear = planRange === PlanRange.yearly
|
||||
const isCurrent = plan === currentPlan
|
||||
const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const btnText = useMemo(() => {
|
||||
if (isCurrent)
|
||||
return t('billing.plansCommon.currentPlan')
|
||||
|
||||
return ({
|
||||
[Plan.sandbox]: t('billing.plansCommon.startForFree'),
|
||||
[Plan.professional]: t('billing.plansCommon.startBuilding'),
|
||||
[Plan.team]: t('billing.plansCommon.getStarted'),
|
||||
})[plan]
|
||||
}, [isCurrent, plan, t])
|
||||
|
||||
const handleGetPayUrl = async () => {
|
||||
if (loading)
|
||||
return
|
||||
|
||||
if (isPlanDisabled)
|
||||
return
|
||||
|
||||
if (isFreePlan)
|
||||
return
|
||||
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month')
|
||||
// Adb Block additional tracking block the gtag, so we need to redirect directly
|
||||
window.location.href = res.url
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className='flex min-w-0 flex-1 flex-col pb-3'>
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className='flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{ICON_MAP[plan]}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='flex items-center gap-x-2.5'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
{
|
||||
isMostPopularPlan && (
|
||||
<div className='flex items-center justify-center bg-saas-dify-blue-static px-1.5 py-1'>
|
||||
<span className='system-2xs-semibold-uppercase text-text-primary-on-surface'>
|
||||
{t('billing.plansCommon.mostPopular')}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='system-sm-regular text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
{isFreePlan && (
|
||||
<span className='title-4xl-semi-bold text-text-primary'>{t('billing.plansCommon.free')}</span>
|
||||
)}
|
||||
{!isFreePlan && (
|
||||
<>
|
||||
{isYear && <span className='title-4xl-semi-bold text-text-quaternary line-through'>${planInfo.price * 12}</span>}
|
||||
<span className='title-4xl-semi-bold text-text-primary'>${isYear ? planInfo.price * 10 : planInfo.price}</span>
|
||||
<span className='system-md-regular pb-0.5 text-text-tertiary'>
|
||||
{t('billing.plansCommon.priceTip')}
|
||||
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
isPlanDisabled={isPlanDisabled}
|
||||
btnText={btnText}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(CloudPlanItem)
|
||||
@@ -0,0 +1,104 @@
|
||||
import React from 'react'
|
||||
import { type BasicPlan, Plan } from '../../../../type'
|
||||
import Item from './item'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ALL_PLANS, NUM_INFINITE } from '../../../../config'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
type ListProps = {
|
||||
plan: BasicPlan
|
||||
}
|
||||
|
||||
const List = ({
|
||||
plan,
|
||||
}: ListProps) => {
|
||||
const { t } = useTranslation()
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-y-2.5 p-6'>
|
||||
<Item
|
||||
label={isFreePlan
|
||||
? t('billing.plansCommon.messageRequest.title', { count: planInfo.messageRequest })
|
||||
: t('billing.plansCommon.messageRequest.titlePerMonth', { count: planInfo.messageRequest })}
|
||||
tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.teamWorkspace', { count: planInfo.teamWorkspace })}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.teamMember', { count: planInfo.teamMembers })}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.buildApps', { count: planInfo.buildApps })}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.documents', { count: planInfo.documents })}
|
||||
tooltip={t('billing.plansCommon.documentsTooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.vectorSpace', { size: planInfo.vectorSpace })}
|
||||
tooltip={t('billing.plansCommon.vectorSpaceTooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })}
|
||||
tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip')}
|
||||
/>
|
||||
<Item
|
||||
label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={
|
||||
planInfo.triggerEvents === NUM_INFINITE
|
||||
? t('billing.plansCommon.triggerEvents.unlimited')
|
||||
: plan === Plan.sandbox
|
||||
? t('billing.plansCommon.triggerEvents.sandbox', { count: planInfo.triggerEvents })
|
||||
: t('billing.plansCommon.triggerEvents.professional', { count: planInfo.triggerEvents })
|
||||
}
|
||||
tooltip={t('billing.plansCommon.triggerEvents.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
plan === Plan.sandbox
|
||||
? t('billing.plansCommon.startNodes.limited', { count: 2 })
|
||||
: t('billing.plansCommon.startNodes.unlimited')
|
||||
}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
plan === Plan.sandbox
|
||||
? t('billing.plansCommon.workflowExecution.standard')
|
||||
: plan === Plan.professional
|
||||
? t('billing.plansCommon.workflowExecution.faster')
|
||||
: t('billing.plansCommon.workflowExecution.priority')
|
||||
}
|
||||
tooltip={t('billing.plansCommon.workflowExecution.tooltip') as string}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.annotatedResponse.title', { count: planInfo.annotatedResponse })}
|
||||
tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.logsHistory', { days: planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}` })}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
planInfo.apiRateLimit === NUM_INFINITE
|
||||
? t('billing.plansCommon.unlimitedApiRate')
|
||||
: `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}/${t('billing.plansCommon.month')}`
|
||||
}
|
||||
tooltip={planInfo.apiRateLimit === NUM_INFINITE ? undefined : t('billing.plansCommon.apiRateLimitTooltip') as string}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.modelProviders')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
import Tooltip from './tooltip'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
tooltip,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center'>
|
||||
<span className='system-sm-regular grow text-text-secondary'>{label}</span>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
content={tooltip}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import { RiInfoI } from '@remixicon/react'
|
||||
|
||||
type TooltipProps = {
|
||||
content: string
|
||||
}
|
||||
|
||||
const Tooltip = ({
|
||||
content,
|
||||
}: TooltipProps) => {
|
||||
return (
|
||||
<div className='group relative z-10 size-[18px] overflow-visible'>
|
||||
<div className='system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block'>
|
||||
{content}
|
||||
</div>
|
||||
<div className='flex h-full w-full items-center justify-center rounded-[4px] bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static'>
|
||||
<RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Tooltip)
|
||||
74
dify/web/app/components/billing/pricing/plans/index.tsx
Normal file
74
dify/web/app/components/billing/pricing/plans/index.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import { type BasicPlan, Plan, SelfHostedPlan, type UsagePlanInfo } from '../../type'
|
||||
import CloudPlanItem from './cloud-plan-item'
|
||||
import type { PlanRange } from '../plan-switcher/plan-range-switcher'
|
||||
import SelfHostedPlanItem from './self-hosted-plan-item'
|
||||
|
||||
type PlansProps = {
|
||||
plan: {
|
||||
type: Plan
|
||||
usage: UsagePlanInfo
|
||||
total: UsagePlanInfo
|
||||
}
|
||||
currentPlan: string
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const Plans = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
canPay,
|
||||
}: PlansProps) => {
|
||||
const currentPlanType: BasicPlan = plan.type === Plan.enterprise ? Plan.team : plan.type
|
||||
return (
|
||||
<div className='flex w-full justify-center border-t border-divider-accent px-10'>
|
||||
<div className='flex max-w-[1680px] grow border-x border-divider-accent'>
|
||||
{
|
||||
currentPlan === 'cloud' && (
|
||||
<>
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.sandbox}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.professional}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.team}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
currentPlan === 'self' && <>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.community}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.premium}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.enterprise}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Plans
|
||||
@@ -0,0 +1,55 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { SelfHostedPlan } from '../../../type'
|
||||
import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useTheme from '@/hooks/use-theme'
|
||||
import { Theme } from '@/types/app'
|
||||
|
||||
const BUTTON_CLASSNAME = {
|
||||
[SelfHostedPlan.community]: 'text-text-primary bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover',
|
||||
[SelfHostedPlan.premium]: 'text-background-default bg-saas-background-inverted hover:bg-saas-background-inverted-hover',
|
||||
[SelfHostedPlan.enterprise]: 'text-text-primary-on-surface bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover',
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
plan: SelfHostedPlan
|
||||
handleGetPayUrl: () => void
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
plan,
|
||||
handleGetPayUrl,
|
||||
}: ButtonProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { theme } = useTheme()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isPremiumPlan = plan === SelfHostedPlan.premium
|
||||
const AwsMarketplace = useMemo(() => {
|
||||
return theme === Theme.light ? AwsMarketplaceLight : AwsMarketplaceDark
|
||||
}, [theme])
|
||||
|
||||
return (
|
||||
<button type="button"
|
||||
className={cn(
|
||||
'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
|
||||
BUTTON_CLASSNAME[plan],
|
||||
isPremiumPlan && 'py-2',
|
||||
)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
<div className='flex grow items-center gap-x-2'>
|
||||
<span>{t(`${i18nPrefix}.btnText`)}</span>
|
||||
{isPremiumPlan && (
|
||||
<span className='pb-px pt-[7px]'>
|
||||
<AwsMarketplace className='h-6' />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<RiArrowRightLine className='size-5 shrink-0' />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Button)
|
||||
@@ -0,0 +1,124 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SelfHostedPlan } from '../../../type'
|
||||
import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
|
||||
import Toast from '../../../../base/toast'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import Button from './button'
|
||||
import List from './list'
|
||||
import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
|
||||
import { Community, Enterprise, EnterpriseNoise, Premium, PremiumNoise } from '../../assets'
|
||||
|
||||
const STYLE_MAP = {
|
||||
[SelfHostedPlan.community]: {
|
||||
icon: <Community />,
|
||||
bg: '',
|
||||
noise: null,
|
||||
},
|
||||
[SelfHostedPlan.premium]: {
|
||||
icon: <Premium />,
|
||||
bg: 'bg-billing-plan-card-premium-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<PremiumNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
[SelfHostedPlan.enterprise]: {
|
||||
icon: <Enterprise />,
|
||||
bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<EnterpriseNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
type SelfHostedPlanItemProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
|
||||
plan,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === SelfHostedPlan.community
|
||||
const isPremiumPlan = plan === SelfHostedPlan.premium
|
||||
const isEnterprisePlan = plan === SelfHostedPlan.enterprise
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const handleGetPayUrl = useCallback(() => {
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (isFreePlan) {
|
||||
window.location.href = getStartedWithCommunityUrl
|
||||
return
|
||||
}
|
||||
if (isPremiumPlan) {
|
||||
window.location.href = getWithPremiumUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (isEnterprisePlan)
|
||||
window.location.href = contactSalesUrl
|
||||
}, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
|
||||
|
||||
return (
|
||||
<div className='relative flex flex-1 flex-col overflow-hidden'>
|
||||
<div className={cn('absolute inset-0 -z-10', STYLE_MAP[plan].bg)} />
|
||||
{/* Noise Effect */}
|
||||
{STYLE_MAP[plan].noise}
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className=' flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{STYLE_MAP[plan].icon}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
<div className='system-md-regular line-clamp-2 text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
<div className='title-4xl-semi-bold shrink-0 text-text-primary'>{t(`${i18nPrefix}.price`)}</div>
|
||||
{!isFreePlan && (
|
||||
<span className='system-md-regular pb-0.5 text-text-tertiary'>
|
||||
{t(`${i18nPrefix}.priceTip`)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
{isPremiumPlan && (
|
||||
<div className='flex grow flex-col justify-end gap-y-2 p-6 pt-0'>
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<Azure />
|
||||
</div>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<GoogleCloud />
|
||||
</div>
|
||||
</div>
|
||||
<span className='system-xs-regular text-text-tertiary'>
|
||||
{t('billing.plans.premium.comingSoon')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(SelfHostedPlanItem)
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react'
|
||||
import type { SelfHostedPlan } from '@/app/components/billing/type'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import Item from './item'
|
||||
|
||||
type ListProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const List = ({
|
||||
plan,
|
||||
}: ListProps) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-y-[10px] p-6'>
|
||||
<div className='system-md-semibold text-text-secondary'>
|
||||
<Trans
|
||||
i18nKey={t(`${i18nPrefix}.includesTitle`)}
|
||||
components={{ highlight: <span className='text-text-warning'></span> }}
|
||||
/>
|
||||
</div>
|
||||
{features.map(feature =>
|
||||
<Item
|
||||
key={`${plan}-${feature}`}
|
||||
label={feature}
|
||||
/>,
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
import { RiCheckLine } from '@remixicon/react'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='py-px'>
|
||||
<RiCheckLine className='size-4 shrink-0 text-text-tertiary' />
|
||||
</div>
|
||||
<span className='system-sm-regular grow text-text-secondary'>{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
58
dify/web/app/components/billing/priority-label/index.tsx
Normal file
58
dify/web/app/components/billing/priority-label/index.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
DocumentProcessingPriority,
|
||||
Plan,
|
||||
} from '../type'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { RiAedFill } from '@remixicon/react'
|
||||
|
||||
type PriorityLabelProps = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const PriorityLabel = ({ className }: PriorityLabelProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { plan } = useProviderContext()
|
||||
|
||||
const priority = useMemo(() => {
|
||||
if (plan.type === Plan.sandbox)
|
||||
return DocumentProcessingPriority.standard
|
||||
|
||||
if (plan.type === Plan.professional)
|
||||
return DocumentProcessingPriority.priority
|
||||
|
||||
if (plan.type === Plan.team || plan.type === Plan.enterprise)
|
||||
return DocumentProcessingPriority.topPriority
|
||||
}, [plan])
|
||||
|
||||
return (
|
||||
<Tooltip popupContent={
|
||||
<div>
|
||||
<div className='mb-1 text-xs font-semibold text-text-primary'>{`${t('billing.plansCommon.documentProcessingPriority')}: ${t(`billing.plansCommon.priority.${priority}`)}`}</div>
|
||||
{
|
||||
priority !== DocumentProcessingPriority.topPriority && (
|
||||
<div className='text-xs text-text-secondary'>{t('billing.plansCommon.documentProcessingPriorityTip')}</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
}>
|
||||
<div
|
||||
className={cn(
|
||||
'system-2xs-medium ml-1 inline-flex h-[18px] shrink-0 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary',
|
||||
className,
|
||||
)}>
|
||||
{
|
||||
(plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise) && (
|
||||
<RiAedFill className='mr-0.5 size-3' />
|
||||
)
|
||||
}
|
||||
<span>{t(`billing.plansCommon.priority.${priority}`)}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
export default PriorityLabel
|
||||
24
dify/web/app/components/billing/progress-bar/index.tsx
Normal file
24
dify/web/app/components/billing/progress-bar/index.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type ProgressBarProps = {
|
||||
percent: number
|
||||
color: string
|
||||
}
|
||||
|
||||
const ProgressBar = ({
|
||||
percent = 0,
|
||||
color = '#2970FF',
|
||||
}: ProgressBarProps) => {
|
||||
return (
|
||||
<div className='overflow-hidden rounded-[6px] bg-components-progress-bar-bg'>
|
||||
<div
|
||||
className={cn('h-1 rounded-[6px]', color)}
|
||||
style={{
|
||||
width: `${Math.min(percent, 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProgressBar
|
||||
@@ -0,0 +1,30 @@
|
||||
.surface {
|
||||
border: 0.5px solid var(--color-components-panel-border, rgba(16, 24, 40, 0.08));
|
||||
background:
|
||||
linear-gradient(109deg, var(--color-background-section, #f9fafb) 0%, var(--color-background-section-burn, #f2f4f7) 100%),
|
||||
var(--color-components-panel-bg, #fff);
|
||||
}
|
||||
|
||||
.heroOverlay {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' fill='none'%3E%3Crect x='1' y='1' width='48' height='48' rx='12' stroke='rgba(16, 24, 40, 0.3)' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
|
||||
background-size: 54px 54px;
|
||||
background-position: 31px -23px;
|
||||
background-repeat: repeat;
|
||||
mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
|
||||
}
|
||||
|
||||
.icon {
|
||||
border: 0.5px solid transparent;
|
||||
background:
|
||||
linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%),
|
||||
var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
|
||||
box-shadow: 0 10px 20px color-mix(in srgb, var(--color-util-colors-blue-brand-blue-brand-500, #296dff) 35%, transparent);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(97deg, var(--color-components-input-border-active-prompt-1, rgba(11, 165, 236, 0.95)) -4%, var(--color-components-input-border-active-prompt-2, rgba(21, 90, 239, 0.95)) 45%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
|
||||
import UsageInfo from '@/app/components/billing/usage-info'
|
||||
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
|
||||
import type { Plan } from '@/app/components/billing/type'
|
||||
import styles from './index.module.css'
|
||||
|
||||
type Props = {
|
||||
show: boolean
|
||||
onDismiss: () => void
|
||||
onUpgrade: () => void
|
||||
usage: number
|
||||
total: number
|
||||
resetInDays?: number
|
||||
planType: Plan
|
||||
}
|
||||
|
||||
const TriggerEventsLimitModal: FC<Props> = ({
|
||||
show,
|
||||
onDismiss,
|
||||
onUpgrade,
|
||||
usage,
|
||||
total,
|
||||
resetInDays,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isShow={show}
|
||||
onClose={onDismiss}
|
||||
closable={false}
|
||||
clickOutsideNotClose
|
||||
className={`${styles.surface} flex h-[360px] w-[580px] flex-col overflow-hidden rounded-2xl !p-0 shadow-xl`}
|
||||
>
|
||||
<div className='relative flex w-full flex-1 items-stretch justify-center'>
|
||||
<div
|
||||
aria-hidden
|
||||
className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
|
||||
/>
|
||||
<div className='relative z-10 flex w-full flex-col items-start gap-4 px-8 pt-8'>
|
||||
<div className={`${styles.icon} flex h-12 w-12 items-center justify-center rounded-[12px]`}>
|
||||
<TriggerAll className='h-5 w-5 text-text-primary-on-surface' />
|
||||
</div>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<div className={`${styles.highlight} title-lg-semi-bold`}>
|
||||
{t('billing.triggerLimitModal.title')}
|
||||
</div>
|
||||
<div className='body-md-regular text-text-secondary'>
|
||||
{t('billing.triggerLimitModal.description')}
|
||||
</div>
|
||||
</div>
|
||||
<UsageInfo
|
||||
className='mb-5 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
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex h-[76px] w-full items-center justify-end gap-2 px-8 pb-8 pt-5'>
|
||||
<Button
|
||||
className='h-8 w-[77px] min-w-[72px] !rounded-lg !border-[0.5px] px-3 py-2'
|
||||
onClick={onDismiss}
|
||||
>
|
||||
{t('billing.triggerLimitModal.dismiss')}
|
||||
</Button>
|
||||
<UpgradeBtn
|
||||
isShort
|
||||
onClick={onUpgrade}
|
||||
className='flex w-[93px] items-center justify-center !rounded-lg !px-2'
|
||||
style={{ height: 32 }}
|
||||
labelKey='billing.triggerLimitModal.upgrade'
|
||||
loc='trigger-events-limit-modal'
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TriggerEventsLimitModal)
|
||||
130
dify/web/app/components/billing/type.ts
Normal file
130
dify/web/app/components/billing/type.ts
Normal file
@@ -0,0 +1,130 @@
|
||||
export enum Plan {
|
||||
sandbox = 'sandbox',
|
||||
professional = 'professional',
|
||||
team = 'team',
|
||||
enterprise = 'enterprise',
|
||||
}
|
||||
export enum Priority {
|
||||
standard = 'standard',
|
||||
priority = 'priority',
|
||||
topPriority = 'top-priority',
|
||||
}
|
||||
|
||||
export type BasicPlan = Plan.sandbox | Plan.professional | Plan.team
|
||||
|
||||
export type PlanInfo = {
|
||||
level: number
|
||||
price: number
|
||||
modelProviders: string
|
||||
teamWorkspace: number
|
||||
teamMembers: number
|
||||
buildApps: number
|
||||
documents: number
|
||||
vectorSpace: string
|
||||
documentsUploadQuota: number
|
||||
documentsRequestQuota: number
|
||||
apiRateLimit: number
|
||||
documentProcessingPriority: Priority
|
||||
logHistory: number
|
||||
messageRequest: number
|
||||
triggerEvents: number
|
||||
annotatedResponse: number
|
||||
}
|
||||
|
||||
export enum SelfHostedPlan {
|
||||
community = 'community',
|
||||
premium = 'premium',
|
||||
enterprise = 'enterprise',
|
||||
}
|
||||
|
||||
export type SelfHostedPlanInfo = {
|
||||
level: number
|
||||
price: number
|
||||
modelProviders: string
|
||||
teamWorkspace: number
|
||||
teamMembers: number
|
||||
buildApps: number
|
||||
documents: number
|
||||
vectorSpace: string
|
||||
documentsRequestQuota: number
|
||||
documentProcessingPriority: Priority
|
||||
logHistory: number
|
||||
messageRequest: number
|
||||
annotatedResponse: number
|
||||
}
|
||||
|
||||
export type UsagePlanInfo = Pick<PlanInfo, 'buildApps' | 'teamMembers' | 'annotatedResponse' | 'documentsUploadQuota' | 'apiRateLimit' | 'triggerEvents'> & { vectorSpace: number }
|
||||
|
||||
export type UsageResetInfo = {
|
||||
apiRateLimit?: number | null
|
||||
triggerEvents?: number | null
|
||||
}
|
||||
|
||||
export type BillingQuota = {
|
||||
usage: number
|
||||
limit: number
|
||||
reset_date?: number | null
|
||||
}
|
||||
|
||||
export enum DocumentProcessingPriority {
|
||||
standard = 'standard',
|
||||
priority = 'priority',
|
||||
topPriority = 'top-priority',
|
||||
}
|
||||
|
||||
export type CurrentPlanInfoBackend = {
|
||||
billing: {
|
||||
enabled: boolean
|
||||
subscription: {
|
||||
plan: BasicPlan
|
||||
}
|
||||
}
|
||||
members: {
|
||||
size: number
|
||||
limit: number // total. 0 means unlimited
|
||||
}
|
||||
apps: {
|
||||
size: number
|
||||
limit: number // total. 0 means unlimited
|
||||
}
|
||||
vector_space: {
|
||||
size: number
|
||||
limit: number // total. 0 means unlimited
|
||||
}
|
||||
annotation_quota_limit: {
|
||||
size: number
|
||||
limit: number // total. 0 means unlimited
|
||||
}
|
||||
documents_upload_quota: {
|
||||
size: number
|
||||
limit: number // total. 0 means unlimited
|
||||
}
|
||||
api_rate_limit?: BillingQuota
|
||||
trigger_event?: BillingQuota
|
||||
docs_processing: DocumentProcessingPriority
|
||||
can_replace_logo: boolean
|
||||
model_load_balancing_enabled: boolean
|
||||
dataset_operator_enabled: boolean
|
||||
education: {
|
||||
enabled: boolean
|
||||
activated: boolean
|
||||
},
|
||||
webapp_copyright_enabled: boolean
|
||||
workspace_members: {
|
||||
size: number
|
||||
limit: number
|
||||
},
|
||||
is_allow_transfer_workspace: boolean
|
||||
knowledge_pipeline: {
|
||||
publish_enabled: boolean
|
||||
},
|
||||
}
|
||||
|
||||
export type SubscriptionItem = {
|
||||
plan: Plan
|
||||
url: string
|
||||
}
|
||||
|
||||
export type SubscriptionUrlsBackend = {
|
||||
url: string
|
||||
}
|
||||
81
dify/web/app/components/billing/upgrade-btn/index.tsx
Normal file
81
dify/web/app/components/billing/upgrade-btn/index.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
'use client'
|
||||
import type { CSSProperties, FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import PremiumBadge from '../../base/premium-badge'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
style?: CSSProperties
|
||||
isFull?: boolean
|
||||
size?: 'md' | 'lg'
|
||||
isPlain?: boolean
|
||||
isShort?: boolean
|
||||
onClick?: () => void
|
||||
loc?: string
|
||||
labelKey?: string
|
||||
}
|
||||
|
||||
const UpgradeBtn: FC<Props> = ({
|
||||
className,
|
||||
style,
|
||||
isPlain = false,
|
||||
isShort = false,
|
||||
onClick: _onClick,
|
||||
loc,
|
||||
labelKey,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { setShowPricingModal } = useModalContext()
|
||||
const handleClick = () => {
|
||||
if (_onClick)
|
||||
_onClick()
|
||||
else
|
||||
(setShowPricingModal as any)()
|
||||
}
|
||||
const onClick = () => {
|
||||
handleClick()
|
||||
if (loc && (window as any).gtag) {
|
||||
(window as any).gtag('event', 'click_upgrade_btn', {
|
||||
loc,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const defaultBadgeLabel = t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)
|
||||
const label = labelKey ? t(labelKey) : defaultBadgeLabel
|
||||
|
||||
if (isPlain) {
|
||||
return (
|
||||
<Button
|
||||
className={className}
|
||||
style={style}
|
||||
onClick={onClick}
|
||||
>
|
||||
{labelKey ? label : t('billing.upgradeBtn.plain')}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<PremiumBadge
|
||||
size='m'
|
||||
color='blue'
|
||||
allowHover={true}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
<SparklesSoft className='flex h-3.5 w-3.5 items-center py-[1px] pl-[3px] text-components-premium-badge-indigo-text-stop-0' />
|
||||
<div className='system-xs-medium'>
|
||||
<span className='p-1'>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</PremiumBadge>
|
||||
)
|
||||
}
|
||||
export default React.memo(UpgradeBtn)
|
||||
@@ -0,0 +1,9 @@
|
||||
.upgradeBtn {
|
||||
background: linear-gradient(99deg, rgba(255, 255, 255, 0.12) 7.16%, rgba(255, 255, 255, 0.00) 85.47%), linear-gradient(280deg, #00B2FF 12.96%, #132BFF 90.95%);
|
||||
box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(0, 162, 253, 0.12);
|
||||
|
||||
}
|
||||
.upgradeBtn:hover {
|
||||
background: linear-gradient(99deg, rgba(255, 255, 255, 0.12) 7.16%, rgba(255, 255, 255, 0.00) 85.47%), linear-gradient(280deg, #02C2FF 12.96%, #001AFF 90.95%);
|
||||
box-shadow: 0px 4px 6px -2px rgba(16, 18, 40, 0.08), 0px 12px 16px -4px rgba(0, 209, 255, 0.08);
|
||||
}
|
||||
34
dify/web/app/components/billing/usage-info/apps-info.tsx
Normal file
34
dify/web/app/components/billing/usage-info/apps-info.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiApps2Line,
|
||||
} from '@remixicon/react'
|
||||
import UsageInfo from '../usage-info'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const AppsInfo: FC<Props> = ({
|
||||
className,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { plan } = useProviderContext()
|
||||
const {
|
||||
usage,
|
||||
total,
|
||||
} = plan
|
||||
return (
|
||||
<UsageInfo
|
||||
className={className}
|
||||
Icon={RiApps2Line}
|
||||
name={t('billing.usagePage.buildApps')}
|
||||
usage={usage.buildApps}
|
||||
total={total.buildApps}
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default React.memo(AppsInfo)
|
||||
95
dify/web/app/components/billing/usage-info/index.tsx
Normal file
95
dify/web/app/components/billing/usage-info/index.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ProgressBar from '../progress-bar'
|
||||
import { NUM_INFINITE } from '../config'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
Icon: any
|
||||
name: string
|
||||
tooltip?: string
|
||||
usage: number
|
||||
total: number
|
||||
unit?: string
|
||||
unitPosition?: 'inline' | 'suffix'
|
||||
resetHint?: string
|
||||
resetInDays?: number
|
||||
hideIcon?: boolean
|
||||
}
|
||||
|
||||
const WARNING_THRESHOLD = 80
|
||||
|
||||
const UsageInfo: FC<Props> = ({
|
||||
className,
|
||||
Icon,
|
||||
name,
|
||||
tooltip,
|
||||
usage,
|
||||
total,
|
||||
unit,
|
||||
unitPosition = 'suffix',
|
||||
resetHint,
|
||||
resetInDays,
|
||||
hideIcon = false,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const percent = usage / total * 100
|
||||
const color = percent >= 100
|
||||
? 'bg-components-progress-error-progress'
|
||||
: (percent >= WARNING_THRESHOLD ? 'bg-components-progress-warning-progress' : 'bg-components-progress-bar-progress-solid')
|
||||
const isUnlimited = total === NUM_INFINITE
|
||||
let totalDisplay: string | number = isUnlimited ? t('billing.plansCommon.unlimited') : total
|
||||
if (!isUnlimited && unit && unitPosition === 'inline')
|
||||
totalDisplay = `${total}${unit}`
|
||||
const showUnit = !!unit && !isUnlimited && unitPosition === 'suffix'
|
||||
const resetText = resetHint ?? (typeof resetInDays === 'number' ? t('billing.usagePage.resetsIn', { count: resetInDays }) : undefined)
|
||||
const rightInfo = resetText
|
||||
? (
|
||||
<div className='system-xs-regular ml-auto flex-1 text-right text-text-tertiary'>
|
||||
{resetText}
|
||||
</div>
|
||||
)
|
||||
: (showUnit && (
|
||||
<div className='system-xs-medium ml-auto text-text-tertiary'>
|
||||
{unit}
|
||||
</div>
|
||||
))
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-2 rounded-xl bg-components-panel-bg p-4', className)}>
|
||||
{!hideIcon && Icon && (
|
||||
<Icon className='h-4 w-4 text-text-tertiary' />
|
||||
)}
|
||||
<div className='flex items-center gap-1'>
|
||||
<div className='system-xs-medium text-text-tertiary'>{name}</div>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[180px]'>
|
||||
{tooltip}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className='system-md-semibold flex items-center gap-1 text-text-primary'>
|
||||
<div className='flex items-center gap-1'>
|
||||
{usage}
|
||||
<div className='system-md-regular text-text-quaternary'>/</div>
|
||||
<div>{totalDisplay}</div>
|
||||
</div>
|
||||
{rightInfo}
|
||||
</div>
|
||||
<ProgressBar
|
||||
percent={percent}
|
||||
color={color}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(UsageInfo)
|
||||
@@ -0,0 +1,37 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import {
|
||||
RiHardDrive3Line,
|
||||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import UsageInfo from '../usage-info'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const VectorSpaceInfo: FC<Props> = ({
|
||||
className,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { plan } = useProviderContext()
|
||||
const {
|
||||
usage,
|
||||
total,
|
||||
} = plan
|
||||
return (
|
||||
<UsageInfo
|
||||
className={className}
|
||||
Icon={RiHardDrive3Line}
|
||||
name={t('billing.usagePage.vectorSpace')}
|
||||
tooltip={t('billing.usagePage.vectorSpaceTooltip') as string}
|
||||
usage={usage.vectorSpace}
|
||||
total={total.vectorSpace}
|
||||
unit='MB'
|
||||
unitPosition='inline'
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default React.memo(VectorSpaceInfo)
|
||||
92
dify/web/app/components/billing/utils/index.ts
Normal file
92
dify/web/app/components/billing/utils/index.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import dayjs from 'dayjs'
|
||||
import type { BillingQuota, CurrentPlanInfoBackend } from '../type'
|
||||
import { ALL_PLANS, NUM_INFINITE } from '@/app/components/billing/config'
|
||||
|
||||
const parseLimit = (limit: number) => {
|
||||
if (limit === 0)
|
||||
return NUM_INFINITE
|
||||
|
||||
return limit
|
||||
}
|
||||
|
||||
const parseRateLimit = (limit: number) => {
|
||||
if (limit === 0 || limit === -1)
|
||||
return NUM_INFINITE
|
||||
|
||||
return limit
|
||||
}
|
||||
|
||||
const normalizeResetDate = (resetDate?: number | null) => {
|
||||
if (typeof resetDate !== 'number' || resetDate <= 0)
|
||||
return null
|
||||
|
||||
if (resetDate >= 1e12)
|
||||
return dayjs(resetDate)
|
||||
|
||||
if (resetDate >= 1e9)
|
||||
return dayjs(resetDate * 1000)
|
||||
|
||||
const digits = resetDate.toString()
|
||||
if (digits.length === 8) {
|
||||
const year = digits.slice(0, 4)
|
||||
const month = digits.slice(4, 6)
|
||||
const day = digits.slice(6, 8)
|
||||
const parsed = dayjs(`${year}-${month}-${day}`)
|
||||
return parsed.isValid() ? parsed : null
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const getResetInDaysFromDate = (resetDate?: number | null) => {
|
||||
const resetDay = normalizeResetDate(resetDate)
|
||||
if (!resetDay)
|
||||
return null
|
||||
|
||||
const diff = resetDay.startOf('day').diff(dayjs().startOf('day'), 'day')
|
||||
if (Number.isNaN(diff) || diff < 0)
|
||||
return null
|
||||
|
||||
return diff
|
||||
}
|
||||
|
||||
export const parseCurrentPlan = (data: CurrentPlanInfoBackend) => {
|
||||
const planType = data.billing.subscription.plan
|
||||
const planPreset = ALL_PLANS[planType]
|
||||
const resolveRateLimit = (limit?: number, fallback?: number) => {
|
||||
const value = limit ?? fallback ?? 0
|
||||
return parseRateLimit(value)
|
||||
}
|
||||
const getQuotaUsage = (quota?: BillingQuota) => quota?.usage ?? 0
|
||||
const getQuotaResetInDays = (quota?: BillingQuota) => {
|
||||
if (!quota)
|
||||
return null
|
||||
return getResetInDaysFromDate(quota.reset_date)
|
||||
}
|
||||
|
||||
return {
|
||||
type: planType,
|
||||
usage: {
|
||||
vectorSpace: data.vector_space.size,
|
||||
buildApps: data.apps?.size || 0,
|
||||
teamMembers: data.members.size,
|
||||
annotatedResponse: data.annotation_quota_limit.size,
|
||||
documentsUploadQuota: data.documents_upload_quota.size,
|
||||
apiRateLimit: getQuotaUsage(data.api_rate_limit),
|
||||
triggerEvents: getQuotaUsage(data.trigger_event),
|
||||
},
|
||||
total: {
|
||||
vectorSpace: parseLimit(data.vector_space.limit),
|
||||
buildApps: parseLimit(data.apps?.limit) || 0,
|
||||
teamMembers: parseLimit(data.members.limit),
|
||||
annotatedResponse: parseLimit(data.annotation_quota_limit.limit),
|
||||
documentsUploadQuota: parseLimit(data.documents_upload_quota.limit),
|
||||
apiRateLimit: resolveRateLimit(data.api_rate_limit?.limit, planPreset?.apiRateLimit ?? NUM_INFINITE),
|
||||
triggerEvents: resolveRateLimit(data.trigger_event?.limit, planPreset?.triggerEvents),
|
||||
},
|
||||
reset: {
|
||||
apiRateLimit: getQuotaResetInDays(data.api_rate_limit),
|
||||
triggerEvents: getQuotaResetInDays(data.trigger_event),
|
||||
},
|
||||
}
|
||||
}
|
||||
29
dify/web/app/components/billing/vector-space-full/index.tsx
Normal file
29
dify/web/app/components/billing/vector-space-full/index.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import UpgradeBtn from '../upgrade-btn'
|
||||
import VectorSpaceInfo from '../usage-info/vector-space-info'
|
||||
import s from './style.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
import GridMask from '@/app/components/base/grid-mask'
|
||||
|
||||
const VectorSpaceFull: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<GridMask wrapperClassName='border border-gray-200 rounded-xl' canvasClassName='rounded-xl' gradientClassName='rounded-xl'>
|
||||
<div className='px-6 py-5'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
|
||||
<div>{t('billing.vectorSpace.fullTip')}</div>
|
||||
<div>{t('billing.vectorSpace.fullSolution')}</div>
|
||||
</div>
|
||||
<UpgradeBtn loc='knowledge-add-file' />
|
||||
</div>
|
||||
<VectorSpaceInfo className='pt-4' />
|
||||
</div>
|
||||
</GridMask>
|
||||
)
|
||||
}
|
||||
export default React.memo(VectorSpaceFull)
|
||||
@@ -0,0 +1,7 @@
|
||||
.textGradient {
|
||||
background: linear-gradient(92deg, #2250F2 -29.55%, #0EBCF3 75.22%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user