Spaces:
Running
Running
File size: 3,402 Bytes
6acfd72 8d7950f 6acfd72 8d7950f 6acfd72 8d7950f 6acfd72 8d7950f 6acfd72 8d7950f 6acfd72 8d7950f 6acfd72 8d7950f 6acfd72 8d7950f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | import * as Icons from "lucide-react";
import { type LucideIcon, Clock } from "lucide-react";
interface FeatureCardProps {
icon?: LucideIcon;
iconName?: string;
title: string;
benefit: string;
description: string;
dark?: boolean;
comingSoon?: boolean;
}
function resolveIcon(iconName?: string, icon?: LucideIcon): LucideIcon {
if (icon) return icon;
if (iconName && iconName in Icons) {
return (Icons as unknown as Record<string, LucideIcon>)[iconName];
}
return Icons.Zap; // fallback
}
export default function FeatureCard({
icon,
iconName,
title,
benefit,
description,
dark = false,
comingSoon = false,
}: FeatureCardProps) {
const Icon = resolveIcon(iconName, icon);
if (dark) {
return (
<div className={`relative rounded-xl p-6 ${comingSoon ? "catalog-card-muted" : "feature-card-dark"}`}>
{comingSoon && (
<div
className="absolute top-4 right-4 flex items-center gap-1.5 px-2 py-0.5 rounded-full"
style={{
background: "rgba(255,255,255,0.06)",
border: "1px solid rgba(255,255,255,0.1)",
}}
>
<Clock className="w-3 h-3" style={{ color: "#64748B" }} aria-hidden="true" />
<span className="text-[10px] font-medium" style={{ color: "#64748B" }}>
Coming Soon
</span>
</div>
)}
<div
className="w-10 h-10 rounded-lg flex items-center justify-center mb-4"
style={{ background: "rgba(15,118,110,0.2)", border: "1px solid rgba(20,184,166,0.25)" }}
>
<Icon className="w-5 h-5" style={{ color: "#14B8A6" }} aria-hidden="true" />
</div>
<p
className="text-xs font-bold uppercase tracking-widest mb-1"
style={{ color: "#14B8A6" }}
>
{benefit}
</p>
<h3 className="text-white font-semibold text-base mb-2">{title}</h3>
<p className="text-sm leading-relaxed" style={{ color: "rgba(148,163,184,0.85)" }}>
{description}
</p>
</div>
);
}
return (
<div className={`relative rounded-xl p-6 ${comingSoon ? "opacity-50" : "feature-card-light"}`}>
{comingSoon && (
<div
className="absolute top-4 right-4 flex items-center gap-1.5 px-2 py-0.5 rounded-full"
style={{
background: "rgba(15,118,110,0.08)",
border: "1px solid rgba(15,118,110,0.2)",
}}
>
<Clock className="w-3 h-3" style={{ color: "#64748B" }} aria-hidden="true" />
<span className="text-[10px] font-medium" style={{ color: "#64748B" }}>
Coming Soon
</span>
</div>
)}
<div
className="w-10 h-10 rounded-lg flex items-center justify-center mb-4"
style={{ background: "rgba(15,118,110,0.08)", border: "1px solid rgba(15,118,110,0.15)" }}
>
<Icon className="w-5 h-5" style={{ color: "#0F766E" }} aria-hidden="true" />
</div>
<p
className="text-xs font-bold uppercase tracking-widest mb-1"
style={{ color: "#0F766E" }}
>
{benefit}
</p>
<h3 className="font-semibold text-base mb-2" style={{ color: "#1E293B" }}>
{title}
</h3>
<p className="text-sm leading-relaxed" style={{ color: "#64748B" }}>
{description}
</p>
</div>
);
}
|