114 lines
3.9 KiB
JavaScript
114 lines
3.9 KiB
JavaScript
import { useState } from "react";
|
|
import "./TierPicker.css";
|
|
|
|
const TIERS = [
|
|
{
|
|
id: "free",
|
|
name: "Trial Monitoring",
|
|
price: { monthly: "$0", annual: "$0" },
|
|
period: { monthly: "", annual: "" },
|
|
features: [
|
|
"Monitor 1 blockchain address 24/7",
|
|
"Configure alerts to fire on trigger events",
|
|
"1 transaction alert type per trigger (email digest)",
|
|
],
|
|
disabledFeatures: [],
|
|
},
|
|
{
|
|
id: "premium",
|
|
name: "Premium Monitoring",
|
|
price: { monthly: "$8.78", annual: "$94.78" },
|
|
period: { monthly: "/month", annual: "/year" },
|
|
features: [
|
|
"Monitor 3 blockchain addresses",
|
|
"Configure two types of rule-based alerts to fire on trigger events for each of the three addresses",
|
|
"Daily email digest alert",
|
|
"Real-time Discord alerts",
|
|
"Real-time Telegram alerts",
|
|
],
|
|
disabledFeatures: [],
|
|
highlighted: true,
|
|
},
|
|
{
|
|
id: "pro",
|
|
name: "Professional Monitoring",
|
|
price: { monthly: "$16.78", annual: "$181.78" },
|
|
period: { monthly: "/month", annual: "/year" },
|
|
features: [
|
|
"Monitor unlimited blockchain addresses",
|
|
"Configure unlimited alert rules to fire on unlimited events on any address",
|
|
"Daily email digest alert",
|
|
"Real-time Discord alerts",
|
|
"Real-time Telegram alerts",
|
|
"Real-time Slack alerts configurable for multiple Slack groups or channels",
|
|
"Unlimited transaction alert types per monitored address",
|
|
],
|
|
disabledFeatures: [],
|
|
},
|
|
];
|
|
|
|
export default function TierPicker({ onSelect, selectedTier }) {
|
|
const [isAnnual, setIsAnnual] = useState(true);
|
|
|
|
return (
|
|
<div className="tier-picker">
|
|
<div className="tier-picker__toggle">
|
|
<button
|
|
className={`tier-picker__toggle-btn${!isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
|
|
onClick={() => setIsAnnual(false)}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
className={`tier-picker__toggle-btn${isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
|
|
onClick={() => setIsAnnual(true)}
|
|
>
|
|
Annual
|
|
</button>
|
|
</div>
|
|
|
|
<div className="tier-picker__cards">
|
|
{TIERS.map((tier) => (
|
|
<div
|
|
key={tier.id}
|
|
className={`tier-picker__card${tier.highlighted ? " tier-picker__card--highlighted" : ""}${selectedTier === tier.id ? " tier-picker__card--selected" : ""}`}
|
|
>
|
|
{tier.highlighted && (
|
|
<div className="tier-picker__badge">Most Popular</div>
|
|
)}
|
|
<h3 className="tier-picker__name">{tier.name}</h3>
|
|
<div className="tier-picker__price">
|
|
<span className="tier-picker__amount">
|
|
{isAnnual ? tier.price.annual : tier.price.monthly}
|
|
</span>
|
|
{(isAnnual ? tier.period.annual : tier.period.monthly) && (
|
|
<span className="tier-picker__period">
|
|
{isAnnual ? tier.period.annual : tier.period.monthly}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<ul className="tier-picker__features">
|
|
{tier.features.map((f) => (
|
|
<li key={f} className="tier-picker__feature">
|
|
<span className="tier-picker__check">✓</span> {f}
|
|
</li>
|
|
))}
|
|
{tier.disabledFeatures.map((f) => (
|
|
<li key={f} className="tier-picker__feature tier-picker__feature--disabled">
|
|
<span className="tier-picker__dash">—</span> {f}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<button
|
|
className={`btn tier-picker__btn${selectedTier === tier.id ? " tier-picker__btn--selected" : ""}`}
|
|
onClick={() => onSelect(tier.id, isAnnual ? "annual" : "monthly")}
|
|
>
|
|
{selectedTier === tier.id ? "Selected" : "Select"}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|