122 lines
3.5 KiB
TypeScript
122 lines
3.5 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
interface Feature {
|
||
key: string;
|
||
translation_key: string;
|
||
tooltip_key?: string;
|
||
category: string;
|
||
}
|
||
|
||
interface Category {
|
||
icon: string;
|
||
translation_key: string;
|
||
}
|
||
|
||
interface PricingFeatureCategoryProps {
|
||
categoryKey: string;
|
||
category: Category;
|
||
features: Feature[];
|
||
className?: string;
|
||
}
|
||
|
||
/**
|
||
* PricingFeatureCategory - Displays a collapsible category of features
|
||
* Groups related features with icons for better organization
|
||
*/
|
||
export const PricingFeatureCategory: React.FC<PricingFeatureCategoryProps> = ({
|
||
categoryKey,
|
||
category,
|
||
features,
|
||
className = '',
|
||
}) => {
|
||
const [isExpanded, setIsExpanded] = useState(false);
|
||
const { t } = useTranslation('subscription');
|
||
|
||
if (features.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
const categoryName = t(category.translation_key);
|
||
|
||
return (
|
||
<div className={`border-b border-gray-200 last:border-b-0 ${className}`}>
|
||
<button
|
||
onClick={() => setIsExpanded(!isExpanded)}
|
||
className="w-full flex items-center justify-between py-3 px-4 hover:bg-gray-50 transition-colors"
|
||
aria-expanded={isExpanded}
|
||
aria-controls={`category-${categoryKey}`}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xl" role="img" aria-label={categoryName}>
|
||
{category.icon}
|
||
</span>
|
||
<span className="font-semibold text-gray-800 text-sm">
|
||
{categoryName}
|
||
</span>
|
||
<span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
|
||
{features.length}
|
||
</span>
|
||
</div>
|
||
<svg
|
||
className={`w-5 h-5 text-gray-400 transition-transform ${
|
||
isExpanded ? 'rotate-180' : ''
|
||
}`}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M19 9l-7 7-7-7"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
|
||
{isExpanded && (
|
||
<div
|
||
id={`category-${categoryKey}`}
|
||
className="px-4 pb-3 space-y-2"
|
||
>
|
||
{features.map((feature) => {
|
||
const featureName = t(feature.translation_key);
|
||
const tooltip = feature.tooltip_key ? t(feature.tooltip_key) : undefined;
|
||
|
||
return (
|
||
<div
|
||
key={feature.key}
|
||
className="flex items-start gap-2 text-sm group"
|
||
title={tooltip}
|
||
>
|
||
<svg
|
||
className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
>
|
||
<path
|
||
fillRule="evenodd"
|
||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||
clipRule="evenodd"
|
||
/>
|
||
</svg>
|
||
<span className="text-gray-700 flex-1">
|
||
{featureName}
|
||
{tooltip && (
|
||
<span className="ml-1 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
ℹ️
|
||
</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PricingFeatureCategory;
|