Plan features with badge

1import { CheckIcon, FlaskConicalIcon, SparklesIcon } from "lucide-react";
2import { Badge } from "@/registry/ui/badge";
3 
4const features = [
5  {
6    title: "Unlimited Projects",
7  },
8  {
9    title: "Custom Integrations",
10    isNew: true,
11  },
12  {
13    title: "Advanced Analytics",
14    isExperimental: true,
15  },
16  {
17    title: "Priority Support",
18  },
19  {
20    title: "Team Collaboration",
21  },
22];
23 
24const PlanFeaturesWithBadge = () => {
25  return (
26    <ul className="space-y-2.5">
27      {features.map((feature) => (
28        <li className="flex items-center gap-2 text-sm" key={feature.title}>
29          <CheckIcon className="size-4" />
30          {feature.title}
31          {feature.isExperimental && (
32            <Badge
33              className="ms-1 border-amber-600/30 bg-amber-600/10 text-amber-600 dark:bg-amber-600/15"
34              variant="outline"
35            >
36              <FlaskConicalIcon /> Experimental
37            </Badge>
38          )}
39          {feature.isNew && (
40            <Badge
41              className="ms-1 border-blue-600/30 bg-blue-600/10 text-blue-600 dark:bg-blue-600/20 dark:text-blue-400"
42              variant="outline"
43            >
44              <SparklesIcon /> New
45            </Badge>
46          )}
47        </li>
48      ))}
49    </ul>
50  );
51};
52 
53export default PlanFeaturesWithBadge;