45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { useTranslations } from "next-intl";
|
|
|
|
export function Features({ features }: { features: string[] }) {
|
|
const t = useTranslations();
|
|
if (!features || features.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="mt-12">
|
|
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
|
|
{t("products.features")}
|
|
</h2>
|
|
<div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-linear-to-r from-stone-800 to-black/10 border-b border-gray-800">
|
|
<th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
|
|
{t("products.feature")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{features.map((feature, index) => (
|
|
<tr
|
|
key={index}
|
|
className={`border-b border-gray-800 last:border-b-0 transition-colors hover:bg-red-900/10 ${
|
|
index % 2 === 0 ? "bg-[#252525]" : "bg-[#1e1e1e]"
|
|
}`}
|
|
>
|
|
<td className="px-4 py-4 md:px-6 text-sm md:text-base text-gray-300">
|
|
<div className="flex items-start gap-3">
|
|
<span className="text-red-700 mt-1">•</span>
|
|
<span>{feature}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|