EDU badge
This commit is contained in:
JzoNg
parent
58a74fe1fb
commit
ed83f5f1ca
@ -1,7 +1,9 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import {
|
||||
RiGraduationCapFill,
|
||||
} from '@remixicon/react'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import DeleteAccount from '../delete-account'
|
||||
import s from './index.module.css'
|
||||
@ -16,6 +18,7 @@ import { ToastContext } from '@/app/components/base/toast'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
import { IS_CE_EDITION } from '@/config'
|
||||
import Input from '@/app/components/base/input'
|
||||
import PremiumBadge from '@/app/components/base/premium-badge'
|
||||
|
||||
const titleClassName = `
|
||||
system-sm-semibold text-text-secondary
|
||||
@ -135,7 +138,13 @@ export default function AccountPage() {
|
||||
<div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
|
||||
<AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
|
||||
<div className='ml-4'>
|
||||
<p className='system-xl-semibold text-text-primary'>{userProfile.name}</p>
|
||||
<p className='system-xl-semibold text-text-primary'>
|
||||
{userProfile.name}
|
||||
<PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
|
||||
<RiGraduationCapFill className='w-3 h-3 mr-1' />
|
||||
<span className='system-2xs-medium'>EDU</span>
|
||||
</PremiumBadge>
|
||||
</p>
|
||||
<p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,13 +2,17 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Fragment } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
RiGraduationCapFill,
|
||||
} from '@remixicon/react'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
import Avatar from '@/app/components/base/avatar'
|
||||
import { logout } from '@/service/common'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import PremiumBadge from '@/app/components/base/premium-badge'
|
||||
|
||||
export interface IAppSelector {
|
||||
export type IAppSelector = {
|
||||
isMobile: boolean
|
||||
}
|
||||
|
||||
@ -68,7 +72,13 @@ export default function AppSelector() {
|
||||
<div className='p-1'>
|
||||
<div className='flex flex-nowrap items-center px-3 py-2'>
|
||||
<div className='grow'>
|
||||
<div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
|
||||
<div className='system-md-medium text-text-primary break-all'>
|
||||
{userProfile.name}
|
||||
<PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
|
||||
<RiGraduationCapFill className='w-3 h-3 mr-1' />
|
||||
<span className='system-2xs-medium'>EDU</span>
|
||||
</PremiumBadge>
|
||||
</div>
|
||||
<div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
|
||||
</div>
|
||||
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
|
||||
|
||||
@ -22,7 +22,7 @@ const Header = () => {
|
||||
<div className='w-[1px] h-4 bg-divider-regular' />
|
||||
<p className='text-text-primary title-3xl-semi-bold'>{t('common.account.account')}</p>
|
||||
</div>
|
||||
<div className='flex items-center flex-shrink-0 gap-3'>
|
||||
<div className='flex items-center shrink-0 gap-3'>
|
||||
<Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
|
||||
<RiRobot2Line className='w-4 h-4' />
|
||||
<p>{t('common.account.studio')}</p>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
@layer components {
|
||||
.premium-badge {
|
||||
@apply inline-flex justify-center items-center rounded-full border box-border border-[rgba(255,255,255,0.8)] text-white
|
||||
@apply inline-flex justify-center items-center rounded-[6px] border box-border border-[rgba(255,255,255,0.8)] text-white
|
||||
}
|
||||
|
||||
/* m is for the regular button */
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
'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 items-center h-[22px] px-2 rounded-md border text-xs font-semibold uppercase',
|
||||
isDisplayOnly ? 'cursor-default' : 'cursor-pointer',
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(HeaderBillingBtn)
|
||||
@ -3,7 +3,18 @@ import { useTranslation } from 'react-i18next'
|
||||
import { Fragment, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useContext, useContextSelector } from 'use-context-selector'
|
||||
import { RiAccountCircleLine, RiArrowDownSLine, RiArrowRightUpLine, RiBookOpenLine, RiGithubLine, RiInformation2Line, RiLogoutBoxRLine, RiMap2Line, RiSettings3Line, RiStarLine } from '@remixicon/react'
|
||||
import {
|
||||
RiAccountCircleLine,
|
||||
RiArrowRightUpLine,
|
||||
RiBookOpenLine,
|
||||
RiGithubLine,
|
||||
RiGraduationCapFill,
|
||||
RiInformation2Line,
|
||||
RiLogoutBoxRLine,
|
||||
RiMap2Line,
|
||||
RiSettings3Line,
|
||||
RiStarLine,
|
||||
} from '@remixicon/react'
|
||||
import Link from 'next/link'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
import Indicator from '../indicator'
|
||||
@ -11,7 +22,7 @@ import AccountAbout from '../account-about'
|
||||
import GithubStar from '../github-star'
|
||||
import Support from './support'
|
||||
import Compliance from './compliance'
|
||||
import classNames from '@/utils/classnames'
|
||||
import PremiumBadge from '@/app/components/base/premium-badge'
|
||||
import I18n from '@/context/i18n'
|
||||
import Avatar from '@/app/components/base/avatar'
|
||||
import { logout } from '@/service/common'
|
||||
@ -20,12 +31,9 @@ import { useModalContext } from '@/context/modal-context'
|
||||
import { LanguagesSupported } from '@/i18n/language'
|
||||
import { LicenseStatus } from '@/types/feature'
|
||||
import { IS_CLOUD_EDITION } from '@/config'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type IAppSelector = {
|
||||
isMobile: boolean
|
||||
}
|
||||
|
||||
export default function AppSelector({ isMobile }: IAppSelector) {
|
||||
export default function AppSelector() {
|
||||
const itemClassName = `
|
||||
flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
|
||||
rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
|
||||
@ -58,20 +66,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
|
||||
{
|
||||
({ open }) => (
|
||||
<>
|
||||
<Menu.Button
|
||||
className={`
|
||||
inline-flex items-center
|
||||
rounded-[20px] py-1 pr-2.5 pl-1 text-sm
|
||||
text-text-secondary hover:bg-state-base-hover
|
||||
mobile:px-1
|
||||
${open && 'bg-state-base-hover'}
|
||||
`}
|
||||
>
|
||||
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
|
||||
{!isMobile && <>
|
||||
{userProfile.name}
|
||||
<RiArrowDownSLine className="w-3 h-3 ml-1 text-text-tertiary" />
|
||||
</>}
|
||||
<Menu.Button className={cn('inline-flex items-center rounded-[20px] p-0.5 hover:bg-background-default-dodge', open && 'bg-background-default-dodge')}>
|
||||
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
@ -92,7 +88,13 @@ export default function AppSelector({ isMobile }: IAppSelector) {
|
||||
<Menu.Item disabled>
|
||||
<div className='flex flex-nowrap items-center pl-3 pr-2 py-[13px]'>
|
||||
<div className='grow'>
|
||||
<div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
|
||||
<div className='system-md-medium text-text-primary break-all'>
|
||||
{userProfile.name}
|
||||
<PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
|
||||
<RiGraduationCapFill className='w-3 h-3 mr-1' />
|
||||
<span className='system-2xs-medium'>EDU</span>
|
||||
</PremiumBadge>
|
||||
</div>
|
||||
<div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
|
||||
</div>
|
||||
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
|
||||
@ -101,38 +103,38 @@ export default function AppSelector({ isMobile }: IAppSelector) {
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => <Link
|
||||
className={classNames(itemClassName, 'group',
|
||||
className={cn(itemClassName, 'group',
|
||||
active && 'bg-state-base-hover',
|
||||
)}
|
||||
href='/account'
|
||||
target='_self' rel='noopener noreferrer'>
|
||||
<RiAccountCircleLine className='size-4 flex-shrink-0 text-text-tertiary' />
|
||||
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.account.account')}</div>
|
||||
<RiArrowRightUpLine className='size-[14px] flex-shrink-0 text-text-tertiary' />
|
||||
<RiAccountCircleLine className='size-4 shrink-0 text-text-tertiary' />
|
||||
<div className='grow system-md-regular text-text-secondary px-1'>{t('common.account.account')}</div>
|
||||
<RiArrowRightUpLine className='size-[14px] shrink-0 text-text-tertiary' />
|
||||
</Link>}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => <div className={classNames(itemClassName,
|
||||
{({ active }) => <div className={cn(itemClassName,
|
||||
active && 'bg-state-base-hover',
|
||||
)} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
|
||||
<RiSettings3Line className='size-4 flex-shrink-0 text-text-tertiary' />
|
||||
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.settings')}</div>
|
||||
<RiSettings3Line className='size-4 shrink-0 text-text-tertiary' />
|
||||
<div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.settings')}</div>
|
||||
</div>}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
<div className='p-1'>
|
||||
<Menu.Item>
|
||||
{({ active }) => <Link
|
||||
className={classNames(itemClassName, 'group justify-between',
|
||||
className={cn(itemClassName, 'group justify-between',
|
||||
active && 'bg-state-base-hover',
|
||||
)}
|
||||
href={
|
||||
locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
|
||||
}
|
||||
target='_blank' rel='noopener noreferrer'>
|
||||
<RiBookOpenLine className='flex-shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.helpCenter')}</div>
|
||||
<RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
|
||||
<RiBookOpenLine className='shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.helpCenter')}</div>
|
||||
<RiArrowRightUpLine className='shrink-0 size-[14px] text-text-tertiary' />
|
||||
</Link>}
|
||||
</Menu.Item>
|
||||
<Support />
|
||||
@ -141,27 +143,27 @@ export default function AppSelector({ isMobile }: IAppSelector) {
|
||||
<div className='p-1'>
|
||||
<Menu.Item>
|
||||
{({ active }) => <Link
|
||||
className={classNames(itemClassName, 'group justify-between',
|
||||
className={cn(itemClassName, 'group justify-between',
|
||||
active && 'bg-state-base-hover',
|
||||
)}
|
||||
href='https://roadmap.dify.ai'
|
||||
target='_blank' rel='noopener noreferrer'>
|
||||
<RiMap2Line className='flex-shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.roadmap')}</div>
|
||||
<RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
|
||||
<RiMap2Line className='shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.roadmap')}</div>
|
||||
<RiArrowRightUpLine className='shrink-0 size-[14px] text-text-tertiary' />
|
||||
</Link>}
|
||||
</Menu.Item>
|
||||
{systemFeatures.license.status === LicenseStatus.NONE && <Menu.Item>
|
||||
{({ active }) => <Link
|
||||
className={classNames(itemClassName, 'group justify-between',
|
||||
className={cn(itemClassName, 'group justify-between',
|
||||
active && 'bg-state-base-hover',
|
||||
)}
|
||||
href='https://github.com/langgenius/dify/stargazers'
|
||||
target='_blank' rel='noopener noreferrer'>
|
||||
<RiGithubLine className='flex-shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.github')}</div>
|
||||
<RiGithubLine className='shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.github')}</div>
|
||||
<div className='flex items-center gap-0.5 px-[5px] py-[3px] border border-divider-deep rounded-[5px] bg-components-badge-bg-dimm'>
|
||||
<RiStarLine className='flex-shrink-0 size-3 text-text-tertiary' />
|
||||
<RiStarLine className='shrink-0 size-3 text-text-tertiary' />
|
||||
<GithubStar className='system-2xs-medium-uppercase text-text-tertiary' />
|
||||
</div>
|
||||
</Link>}
|
||||
@ -169,12 +171,12 @@ export default function AppSelector({ isMobile }: IAppSelector) {
|
||||
{
|
||||
document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
|
||||
<Menu.Item>
|
||||
{({ active }) => <div className={classNames(itemClassName, 'justify-between',
|
||||
{({ active }) => <div className={cn(itemClassName, 'justify-between',
|
||||
active && 'bg-state-base-hover',
|
||||
)} onClick={() => setAboutVisible(true)}>
|
||||
<RiInformation2Line className='flex-shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.about')}</div>
|
||||
<div className='flex-shrink-0 flex items-center'>
|
||||
<RiInformation2Line className='shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.about')}</div>
|
||||
<div className='shrink-0 flex items-center'>
|
||||
<div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
|
||||
<Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
|
||||
</div>
|
||||
@ -186,12 +188,12 @@ export default function AppSelector({ isMobile }: IAppSelector) {
|
||||
<Menu.Item>
|
||||
{({ active }) => <div className='p-1' onClick={() => handleLogout()}>
|
||||
<div
|
||||
className={classNames(itemClassName, 'group justify-between',
|
||||
className={cn(itemClassName, 'group justify-between',
|
||||
active && 'bg-state-base-hover',
|
||||
)}
|
||||
>
|
||||
<RiLogoutBoxRLine className='flex-shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.logout')}</div>
|
||||
<RiLogoutBoxRLine className='shrink-0 size-4 text-text-tertiary' />
|
||||
<div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.logout')}</div>
|
||||
</div>
|
||||
</div>}
|
||||
</Menu.Item>
|
||||
|
||||
@ -4,14 +4,17 @@ import { useTranslation } from 'react-i18next'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
import { RiArrowDownSLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import PlanBadge from '@/app/components/header/plan-badge'
|
||||
import { switchWorkspace } from '@/service/common'
|
||||
import { useWorkspacesContext } from '@/context/workspace-context'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
|
||||
const WorkplaceSelector = () => {
|
||||
const { t } = useTranslation()
|
||||
const { notify } = useContext(ToastContext)
|
||||
const { workspaces } = useWorkspacesContext()
|
||||
const { enableBilling } = useProviderContext()
|
||||
const currentWorkspace = workspaces.find(v => v.current)
|
||||
|
||||
const handleSwitchWorkspace = async (tenant_id: string) => {
|
||||
@ -69,6 +72,7 @@ const WorkplaceSelector = () => {
|
||||
<div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
|
||||
<div className='flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
|
||||
<div className='line-clamp-1 grow overflow-hidden text-text-secondary text-ellipsis system-md-regular cursor-pointer'>{workspace.name}</div>
|
||||
{enableBilling && <PlanBadge size='s' plan={workspace.plan as any} />}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@ const Header = () => {
|
||||
<WorkspaceProvider>
|
||||
<WorkplaceSelector />
|
||||
</WorkspaceProvider>
|
||||
{enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
|
||||
{enableBilling ? <PlanBadge size='s' allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@ -79,7 +79,7 @@ const Header = () => {
|
||||
<LogoSite />
|
||||
</Link>
|
||||
<div className='font-light text-divider-deep'>/</div>
|
||||
{enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
|
||||
{enableBilling ? <PlanBadge size='s' allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
|
||||
</div >
|
||||
)}
|
||||
{
|
||||
@ -94,10 +94,10 @@ const Header = () => {
|
||||
}
|
||||
<div className='flex items-center shrink-0'>
|
||||
<EnvNav />
|
||||
<div className='mr-3'>
|
||||
<div className='mr-2'>
|
||||
<PluginsNav />
|
||||
</div>
|
||||
<AccountDropdown isMobile={isMobile} />
|
||||
<AccountDropdown />
|
||||
</div>
|
||||
{
|
||||
(isMobile && isShowNavMenu) && (
|
||||
|
||||
@ -2,6 +2,9 @@ import { useProviderContext } from '@/context/provider-context'
|
||||
import classNames from '@/utils/classnames'
|
||||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
// import {
|
||||
// RiGraduationCapFill,
|
||||
// } from '@remixicon/react'
|
||||
import { SparklesSoft } from '../../base/icons/src/public/common'
|
||||
import PremiumBadge from '../../base/premium-badge'
|
||||
import { Plan } from '../../billing/type'
|
||||
@ -20,7 +23,7 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
|
||||
|
||||
if (!isFetchedPlan) return null
|
||||
if (plan === Plan.sandbox && sandboxAsUpgrade) {
|
||||
return <div className='select-none'>
|
||||
return <div className='flex select-none'>
|
||||
<PremiumBadge color='blue' allowHover={allowHover} onClick={onClick}>
|
||||
<SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
|
||||
<div className='system-xs-medium'>
|
||||
@ -32,7 +35,7 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
|
||||
</div>
|
||||
}
|
||||
if (plan === Plan.sandbox) {
|
||||
return <div className='select-none'>
|
||||
return <div className='flex select-none'>
|
||||
<PremiumBadge size={size} color='gray' allowHover={allowHover} onClick={onClick}>
|
||||
<div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
|
||||
<span className='p-1'>
|
||||
@ -43,8 +46,9 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
|
||||
</div>
|
||||
}
|
||||
if (plan === Plan.professional) {
|
||||
return <div className='select-none'>
|
||||
return <div className='flex select-none'>
|
||||
<PremiumBadge size={size} color='blue' allowHover={allowHover} onClick={onClick}>
|
||||
{/* <RiGraduationCapFill className='w-3 h-3' /> */}
|
||||
<div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
|
||||
<span className='p-1'>
|
||||
pro
|
||||
@ -54,7 +58,7 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
|
||||
</div>
|
||||
}
|
||||
if (plan === Plan.team) {
|
||||
return <div className='select-none'>
|
||||
return <div className='flex select-none'>
|
||||
<PremiumBadge size={size} color='indigo' allowHover={allowHover} onClick={onClick}>
|
||||
<div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
|
||||
<span className='p-1'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user