dify
This commit is contained in:
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)
|
||||
Reference in New Issue
Block a user