From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/billing/upgrade-btn/index.tsx | 59 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 38 insertions(+), 21 deletions(-)
diff --git a/app/components/billing/upgrade-btn/index.tsx b/app/components/billing/upgrade-btn/index.tsx
index 45f4d44..d7885d7 100644
--- a/app/components/billing/upgrade-btn/index.tsx
+++ b/app/components/billing/upgrade-btn/index.tsx
@@ -2,9 +2,10 @@
import type { 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 { GoldCoin } from '../../base/icons/src/vender/solid/FinanceAndECommerce'
+import { Sparkles } from '../../base/icons/src/public/billing'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
import { useModalContext } from '@/context/modal-context'
type Props = {
@@ -17,9 +18,27 @@
loc?: string
}
+const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => {
+ const { t } = useTranslation()
+
+ return (
+ <div
+ className={cn(className, 'flex items-center h-8 px-3 rounded-lg border border-gray-200 bg-white shadow-sm cursor-pointer')}
+ onClick={onClick}
+ >
+ <div className='leading-[18px] text-[13px] font-medium text-gray-700'>
+ {t('billing.upgradeBtn.plain')}
+ </div>
+ </div>
+ )
+}
+
const UpgradeBtn: FC<Props> = ({
+ className,
isPlain = false,
+ isFull = false,
isShort = false,
+ size = 'md',
onClick: _onClick,
loc,
}) => {
@@ -40,28 +59,26 @@
}
}
- if (isPlain) {
- return (
- <Button onClick={onClick}>
- {t('billing.upgradeBtn.plain')}
- </Button>
- )
- }
+ if (isPlain)
+ return <PlainBtn onClick={onClick} className={className} />
return (
- <PremiumBadge
- size="m"
- color="blue"
- allowHover={true}
+ <div
+ className={cn(
+ s.upgradeBtn,
+ className,
+ isFull ? 'justify-center' : 'px-3',
+ size === 'lg' ? 'h-10' : 'h-9',
+ 'relative flex items-center cursor-pointer border rounded-[20px] border-[#0096EA] text-white',
+ )}
onClick={onClick}
>
- <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'>
- {t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)}
- </span>
- </div>
- </PremiumBadge>
+ <GoldCoin className='mr-1 w-3.5 h-3.5' />
+ <div className='text-xs font-normal'>{t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)}</div>
+ <Sparkles
+ className='absolute -right-1 -top-2 w-4 h-5 bg-cover'
+ />
+ </div>
)
}
export default React.memo(UpgradeBtn)
--
Gitblit v1.8.0