44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import type { SilverBullet } from '../types';
|
|
|
|
interface Step5SilverBulletsProps {
|
|
silver_bullets: SilverBullet[];
|
|
t: any;
|
|
}
|
|
|
|
const Step5SilverBullets: React.FC<Step5SilverBulletsProps> = ({ silver_bullets, t }) => {
|
|
if (!silver_bullets || silver_bullets.length === 0) {
|
|
return (
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-4">{t.title}</h2>
|
|
<p className="text-light-subtle dark:text-brand-light">{t.generating}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-4">{t.title}</h2>
|
|
<p className="text-light-subtle dark:text-brand-light mb-6">
|
|
{t.subtitle}
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
{silver_bullets.map((bullet, index) => (
|
|
<div key={index} className="bg-light-secondary dark:bg-brand-secondary p-6 rounded-lg shadow-lg">
|
|
<h3 className="text-lg font-semibold text-light-text dark:text-white mb-2">
|
|
{t.cardTitle} <span className="text-brand-highlight">{bullet.competitor_name}</span>
|
|
</h3>
|
|
<blockquote className="border-l-4 border-brand-highlight pl-4">
|
|
<p className="text-lg italic text-light-subtle dark:text-brand-light">
|
|
"{bullet.statement}"
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Step5SilverBullets; |