@windrun-huaiin/third-ui 5.12.2 → 5.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main/index.js +27 -46
- package/dist/main/index.js.map +1 -1
- package/dist/main/index.mjs +27 -46
- package/dist/main/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/main/price-plan.tsx +45 -65
package/package.json
CHANGED
package/src/main/price-plan.tsx
CHANGED
|
@@ -149,18 +149,18 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
|
|
|
149
149
|
top: Math.max(8, y),
|
|
150
150
|
zIndex: 9999,
|
|
151
151
|
maxWidth: 200,
|
|
152
|
-
|
|
153
|
-
color: '#fff',
|
|
154
|
-
borderRadius: 10,
|
|
155
|
-
padding: '16px',
|
|
156
|
-
boxShadow: '0 4px 24px 0 rgba(0,0,0,0.25)',
|
|
157
|
-
fontSize: 15,
|
|
158
|
-
lineHeight: 1.6,
|
|
152
|
+
transform: 'translateY(-50%)',
|
|
159
153
|
pointerEvents: 'none',
|
|
160
154
|
whiteSpace: 'pre-line',
|
|
161
|
-
transform: 'translateY(-50%)',
|
|
162
155
|
}
|
|
163
|
-
return
|
|
156
|
+
return (
|
|
157
|
+
<div
|
|
158
|
+
style={style}
|
|
159
|
+
className="bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm"
|
|
160
|
+
>
|
|
161
|
+
{content}
|
|
162
|
+
</div>
|
|
163
|
+
)
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
return (
|
|
@@ -174,65 +174,45 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
|
|
|
174
174
|
</p>
|
|
175
175
|
|
|
176
176
|
{/* billing switch button */}
|
|
177
|
-
<div className="flex
|
|
178
|
-
{/*
|
|
179
|
-
<div className="flex
|
|
180
|
-
<
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
)}
|
|
207
|
-
</span>
|
|
208
|
-
);
|
|
209
|
-
})()}
|
|
177
|
+
<div className="flex flex-col items-center">
|
|
178
|
+
{/* Binary toggle buttons */}
|
|
179
|
+
<div className="flex items-center relative mb-3">
|
|
180
|
+
<div className="flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1">
|
|
181
|
+
<button
|
|
182
|
+
className={cn(
|
|
183
|
+
'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
|
|
184
|
+
billingKey === 'monthly'
|
|
185
|
+
? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
|
|
186
|
+
: 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
|
|
187
|
+
)}
|
|
188
|
+
onClick={() => setBillingKey('monthly')}
|
|
189
|
+
type="button"
|
|
190
|
+
>
|
|
191
|
+
{(billingSwitch.options.find((opt: any) => opt.key === 'monthly')?.name) || 'Monthly'}
|
|
192
|
+
</button>
|
|
193
|
+
<button
|
|
194
|
+
className={cn(
|
|
195
|
+
'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
|
|
196
|
+
billingKey === 'yearly'
|
|
197
|
+
? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
|
|
198
|
+
: 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
|
|
199
|
+
)}
|
|
200
|
+
onClick={() => setBillingKey('yearly')}
|
|
201
|
+
type="button"
|
|
202
|
+
>
|
|
203
|
+
{(billingSwitch.options.find((opt: any) => opt.key === 'yearly')?.name) || 'Yearly'}
|
|
204
|
+
</button>
|
|
205
|
+
</div>
|
|
210
206
|
</div>
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
className={cn(
|
|
215
|
-
'min-w-[120px] px-6 py-2 rounded-full font-medium border transition text-lg',
|
|
216
|
-
billingKey === 'yearly'
|
|
217
|
-
? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600'
|
|
218
|
-
: 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-purple-400',
|
|
219
|
-
'ml-4'
|
|
220
|
-
)}
|
|
221
|
-
onClick={() => setBillingKey('yearly')}
|
|
222
|
-
type="button"
|
|
223
|
-
>
|
|
224
|
-
{(billingSwitch.options.find((opt: any) => opt.key === 'yearly')?.name) || 'Yearly'}
|
|
225
|
-
</button>
|
|
226
|
-
{/* tag (from left to right), invisible when not selected */}
|
|
207
|
+
|
|
208
|
+
{/* Discount info - fixed position between buttons and cards */}
|
|
209
|
+
<div className="h-8 flex items-center justify-center mb-3">
|
|
227
210
|
{(() => {
|
|
228
|
-
const opt = billingSwitch.options.find((opt: any) => opt.key ===
|
|
229
|
-
const bOpt = billingOptions.find((opt: any) => opt.key ===
|
|
230
|
-
if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return
|
|
211
|
+
const opt = billingSwitch.options.find((opt: any) => opt.key === billingKey);
|
|
212
|
+
const bOpt = billingOptions.find((opt: any) => opt.key === billingKey);
|
|
213
|
+
if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return null;
|
|
231
214
|
return (
|
|
232
|
-
<span className=
|
|
233
|
-
"min-w-[80px] px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap",
|
|
234
|
-
billingKey !== 'yearly' && 'invisible'
|
|
235
|
-
)}>
|
|
215
|
+
<span className="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap">
|
|
236
216
|
{opt.discountText.replace(
|
|
237
217
|
'{percent}',
|
|
238
218
|
String(Math.round(Math.abs(bOpt.discount) * 100))
|