@olwiba/ui 0.2.2 → 0.2.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/index.d.ts +5 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/marketing/PricingSection.tsx +9 -3
package/package.json
CHANGED
|
@@ -35,6 +35,10 @@ export interface PricingSectionProps {
|
|
|
35
35
|
footnote?: string;
|
|
36
36
|
mode?: 'subscription' | 'one-time';
|
|
37
37
|
foundingDeadline?: string;
|
|
38
|
+
/** Symbol prepended to the computed price. Ignored by plans with `priceDisplay`. */
|
|
39
|
+
currency?: string;
|
|
40
|
+
/** Badge label for `highlighted` plans with no active `foundingDeadline` countdown. Pass '' to show no badge. */
|
|
41
|
+
highlightedBadgeLabel?: string;
|
|
38
42
|
/** Rendered below each plan's CTA button (e.g. a "Get notified" link). */
|
|
39
43
|
renderPlanFooter?: (plan: PricingPlan) => React.ReactNode;
|
|
40
44
|
}
|
|
@@ -54,6 +58,8 @@ export function PricingSection({
|
|
|
54
58
|
footnote,
|
|
55
59
|
mode = 'subscription',
|
|
56
60
|
foundingDeadline,
|
|
61
|
+
currency = '$',
|
|
62
|
+
highlightedBadgeLabel = 'Founding member',
|
|
57
63
|
renderPlanFooter,
|
|
58
64
|
}: PricingSectionProps) {
|
|
59
65
|
const [annual, setAnnual] = React.useState(false);
|
|
@@ -122,7 +128,7 @@ export function PricingSection({
|
|
|
122
128
|
<StaggerChildren className="mt-10 grid gap-4 lg:grid-cols-3">
|
|
123
129
|
{plans.map((plan) => {
|
|
124
130
|
const rawPrice = isOneTime ? plan.monthly : (annual ? plan.annual : plan.monthly);
|
|
125
|
-
const price = plan.priceDisplay ??
|
|
131
|
+
const price = plan.priceDisplay ?? `${currency}${rawPrice}`;
|
|
126
132
|
const period = plan.periodDisplay ?? (isOneTime ? 'one-time' : (rawPrice > 0 ? '/mo' : ''));
|
|
127
133
|
const badge = plan.highlighted && foundingDeadline
|
|
128
134
|
? (
|
|
@@ -130,8 +136,8 @@ export function PricingSection({
|
|
|
130
136
|
<CountdownTimer deadline={foundingDeadline} compact />
|
|
131
137
|
</span>
|
|
132
138
|
)
|
|
133
|
-
: plan.highlighted
|
|
134
|
-
?
|
|
139
|
+
: plan.highlighted && highlightedBadgeLabel
|
|
140
|
+
? highlightedBadgeLabel
|
|
135
141
|
: undefined;
|
|
136
142
|
return (
|
|
137
143
|
<PricingCard
|