51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ComparisonGridItem {
|
|
label: string;
|
|
leftValue: string;
|
|
rightValue: string;
|
|
}
|
|
|
|
interface ComparisonGridProps {
|
|
title?: string;
|
|
leftLabel: string;
|
|
rightLabel: string;
|
|
items: ComparisonGridItem[];
|
|
}
|
|
|
|
export default function ComparisonGrid({ title, leftLabel, rightLabel, items }: ComparisonGridProps) {
|
|
return (
|
|
<div className="my-16 not-prose">
|
|
{title && (
|
|
<h3 className="text-2xl font-bold text-text-primary mb-8">
|
|
{title}
|
|
</h3>
|
|
)}
|
|
<div className="border border-neutral-200 rounded-3xl overflow-hidden shadow-sm bg-white">
|
|
<div className="grid grid-cols-3 bg-neutral-50 border-b border-neutral-200">
|
|
<div className="p-4 md:p-6"></div>
|
|
<div className="p-4 md:p-6 text-center font-bold text-primary uppercase tracking-widest border-l border-neutral-200 text-xs md:text-sm">
|
|
{leftLabel}
|
|
</div>
|
|
<div className="p-4 md:p-6 text-center font-bold text-primary uppercase tracking-widest border-l border-neutral-200 text-xs md:text-sm">
|
|
{rightLabel}
|
|
</div>
|
|
</div>
|
|
{items.map((item, index) => (
|
|
<div key={index} className="grid grid-cols-3 border-b border-neutral-200 last:border-0 hover:bg-neutral-50 transition-colors group">
|
|
<div className="p-4 md:p-6 font-bold text-text-primary flex items-center text-sm md:text-base">
|
|
{item.label}
|
|
</div>
|
|
<div className="p-4 md:p-6 text-center text-text-secondary border-l border-neutral-200 flex items-center justify-center group-hover:text-text-primary transition-colors text-sm md:text-base">
|
|
{item.leftValue}
|
|
</div>
|
|
<div className="p-4 md:p-6 text-center text-text-secondary border-l border-neutral-200 flex items-center justify-center group-hover:text-text-primary transition-colors text-sm md:text-base">
|
|
{item.rightValue}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|