Initial commit

src/components/shared/PricingFeatureList.tsx

@@ -0,0 +1,44 @@
+"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;