52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { CheckCircle } from 'lucide-react';
|
|
|
|
interface PricingPlan {
|
|
id: string;
|
|
name: string;
|
|
price: string;
|
|
description: string;
|
|
features: string[];
|
|
}
|
|
|
|
interface PricingCardEightProps {
|
|
plans: PricingPlan[];
|
|
className?: string;
|
|
}
|
|
|
|
export const PricingCardEight: React.FC<PricingCardEightProps> = ({
|
|
plans,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<div className={cn('pricing-cards-eight', className)}>
|
|
{plans.map((plan) => (
|
|
<div key={plan.id} className="pricing-card">
|
|
<div className="card-header">
|
|
<h3>{plan.name}</h3>
|
|
<div className="price-section">
|
|
<span className="price-value">{plan.price}</span>
|
|
</div>
|
|
<p className="description">{plan.description}</p>
|
|
</div>
|
|
<div className="card-body">
|
|
<ul className="features-list">
|
|
{plan.features.map((feature, index) => (
|
|
<li key={index} className="feature-item">
|
|
<CheckCircle className="feature-icon" size={20} />
|
|
<span className="feature-text">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingCardEight;
|