45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { Check, LucideIcon } from "lucide-react";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
interface PricingFeatureListProps {
|
|
features: string[];
|
|
icon?: LucideIcon;
|
|
shouldUseLightText?: boolean;
|
|
className?: string;
|
|
featureItemClassName?: string;
|
|
featureIconWrapperClassName?: string;
|
|
featureIconClassName?: string;
|
|
featureTextClassName?: string;
|
|
}
|
|
|
|
const PricingFeatureList = memo(({
|
|
features,
|
|
icon: Icon = Check,
|
|
shouldUseLightText = false,
|
|
className = "",
|
|
featureItemClassName = "",
|
|
featureIconWrapperClassName = "",
|
|
featureIconClassName = "",
|
|
featureTextClassName = "",
|
|
}: PricingFeatureListProps) => {
|
|
return (
|
|
<div className={cls("relative z-1 flex flex-col gap-3", className)}>
|
|
{features.map((feature, featureIndex) => (
|
|
<div key={featureIndex} className={cls("flex items-start gap-3", featureItemClassName)}>
|
|
<div className={cls("h-6 aspect-square primary-button rounded-theme flex items-center justify-center", featureIconWrapperClassName)}>
|
|
<Icon className={cls("h-4/10 text-background", featureIconClassName)} strokeWidth={1.5} />
|
|
</div>
|
|
<span className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", featureTextClassName)}>{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
PricingFeatureList.displayName = "PricingFeatureList";
|
|
|
|
export default PricingFeatureList;
|