chore: Resolve linting warnings

This commit is contained in:
Dries Augustyns
2025-12-29 15:29:29 +01:00
parent 72dffe12e5
commit d56ba0cf9b
5 changed files with 26 additions and 152 deletions
@@ -1,109 +0,0 @@
import {motion} from 'framer-motion';
import React, {useState} from 'react';
interface PricingData {
name: string;
calculatePrice: (emails: number) => number;
color?: string;
}
interface PricingCalculatorProps {
competitors: PricingData[];
defaultVolume?: number;
}
const volumeOptions = [
{label: '10K emails/month', value: 10000},
{label: '100K emails/month', value: 100000},
{label: '500K emails/month', value: 500000},
{label: '1M emails/month', value: 1000000},
];
/**
* Interactive pricing calculator comparing Plunk with competitors
*/
export function PricingCalculator({competitors, defaultVolume = 100000}: PricingCalculatorProps) {
const [volume, setVolume] = useState(defaultVolume);
const plunkPrice = volume * 0.001;
return (
<motion.div
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'overflow-hidden rounded-xl border border-neutral-200 bg-white'}
>
{/* Header */}
<div className={'border-b border-neutral-200 bg-neutral-50 p-8'}>
<h3 className={'text-2xl font-bold text-neutral-900'}>Pricing Calculator</h3>
<p className={'mt-2 text-sm text-neutral-600'}>Compare costs across platforms at different email volumes</p>
</div>
{/* Volume Selector */}
<div className={'p-8'}>
<label className={'block text-sm font-semibold text-neutral-900'}>Monthly Email Volume</label>
<div className={'mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4'}>
{volumeOptions.map(option => (
<button
key={option.value}
onClick={() => setVolume(option.value)}
className={`rounded-lg border px-4 py-3 text-sm font-medium transition ${
volume === option.value
? 'border-neutral-900 bg-neutral-900 text-white'
: 'border-neutral-300 bg-white text-neutral-900 hover:border-neutral-400'
}`}
>
{option.label}
</button>
))}
</div>
</div>
{/* Results */}
<div className={'space-y-4 p-8 pt-0'}>
{/* Plunk */}
<div className={'rounded-lg border border-neutral-900 bg-neutral-50 p-6'}>
<div className={'flex items-center justify-between'}>
<div>
<span className={'text-lg font-bold text-neutral-900'}>Plunk</span>
<span className={'ml-3 rounded-full bg-neutral-900 px-3 py-1 text-xs font-medium text-white'}>
Cheapest
</span>
</div>
<div className={'text-right'}>
<div className={'text-3xl font-bold text-neutral-900'}>${plunkPrice.toFixed(2)}</div>
<div className={'text-sm text-neutral-600'}>per month</div>
</div>
</div>
</div>
{/* Competitors */}
{competitors.map((competitor, index) => {
const price = competitor.calculatePrice(volume);
const savings = ((price - plunkPrice) / price) * 100;
return (
<div key={competitor.name} className={'rounded-lg border border-neutral-200 bg-white p-6'}>
<div className={'flex items-center justify-between'}>
<div>
<span className={'text-lg font-semibold text-neutral-900'}>{competitor.name}</span>
</div>
<div className={'text-right'}>
<div className={'text-3xl font-bold text-neutral-900'}>${price.toFixed(2)}</div>
<div className={'text-sm text-neutral-600'}>per month</div>
</div>
</div>
{savings > 0 && (
<div className={'mt-3 text-sm text-neutral-600'}>
Save <span className={'font-semibold text-neutral-900'}>{savings.toFixed(0)}%</span> with Plunk
</div>
)}
</div>
);
})}
</div>
</motion.div>
);
}
-1
View File
@@ -3,4 +3,3 @@ export * from './Footer';
export * from './ComparisonTable';
export * from './FAQSection';
export * from './CodeBlock';
export * from './PricingCalculator';