60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
'use client';
|
|
import NumberFlow from '@number-flow/react';
|
|
|
|
import { useState } from 'react';
|
|
import { Slider } from './ui/slider';
|
|
|
|
const PRICING = [
|
|
{ price: 0, events: 5_000 },
|
|
{ price: 5, events: 10_000 },
|
|
{ price: 20, events: 100_000 },
|
|
{ price: 30, events: 250_000 },
|
|
{ price: 50, events: 500_000 },
|
|
{ price: 90, events: 1_000_000 },
|
|
{ price: 180, events: 2_500_000 },
|
|
{ price: 250, events: 5_000_000 },
|
|
{ price: 400, events: 10_000_000 },
|
|
// { price: 650, events: 20_000_000 },
|
|
// { price: 900, events: 30_000_000 },
|
|
];
|
|
|
|
export function PricingSlider() {
|
|
const [index, setIndex] = useState(2);
|
|
const match = PRICING[index];
|
|
const formatNumber = (value: number) => value.toLocaleString();
|
|
|
|
return (
|
|
<>
|
|
<Slider
|
|
value={[index]}
|
|
max={PRICING.length}
|
|
step={1}
|
|
tooltip={
|
|
match
|
|
? `${formatNumber(match.events)} events`
|
|
: `More than ${formatNumber(PRICING[PRICING.length - 1].events)} events`
|
|
}
|
|
onValueChange={(value) => setIndex(value[0])}
|
|
/>
|
|
|
|
{match ? (
|
|
<div>
|
|
<NumberFlow
|
|
className="text-5xl"
|
|
value={match.price}
|
|
format={{
|
|
style: 'currency',
|
|
currency: 'USD',
|
|
maximumFractionDigits: 0,
|
|
}}
|
|
locales={'en-US'}
|
|
/>
|
|
<span className="text-sm text-muted-foreground ml-2">/ month</span>
|
|
</div>
|
|
) : (
|
|
<div>Contact us hello@openpanel.dev</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|